CSS3自定义Checkbox特效 5种炫酷效果 | HTML5资源教程查看: 38514|回复: 198
【誓言】Hover鼠标滑过CSS3过渡位移效果（如图）
TA的每日心情抱抱 08:59签到天数: 172 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 97095, 距离下一级还需 2905 积分
中级会员, 积分 97095, 距离下一级还需 2905 积分
本帖最后由 誓言芜罪 于
14:09 编辑
有图有真相
111.gif (3.88 MB, 下载次数: 45)
13:57 上传
效果预览地址（第二屏）
& & & &最近看到某电器旗舰店的效果，就仿下来了
& && &淘宝天猫通用，已经添加了C店天猫的class名
& && &注意要改偏移left的值！
代码如下
&!--放导航CSS部分--&
&style&
.shiyan_lsm {
&&background:url(/imgextra/i4//TB2PkV1aXXXXXb_XXXXXXXXXXXX-.jpg) 0px 0px no-
}
.shiyan_lsm:hover {
&&background:url(/imgextra/i4//TB2PkV1aXXXXXb_XXXXXXXXXXXX-.jpg) -40px 0px no-
}
.shiyan_lsm .shiyan_lsm01 {
&&left:1000
&&top:200
&&background:url(/imgextra/i2//TB2YupFaXXXXXbKXpXXXXXXXXXX_!!.png) no-
}
.shiyan_lsm:hover .shiyan_lsm01 {
&&left:950
&&top:200
}
.shiyan_lsm .shiyan_lsm02 {
&&left:300
&&top:180
&&background:url(/imgextra/i1//TB2jrFIaXXXXXbbXpXXXXXXXXXX_!!.png) no-
}
.shiyan_lsm:hover .shiyan_lsm02 {
&&left:450
&&top:180
}
.shiyan_lsm .shiyan_lsm03 {
&&left:1200
&&top:180
&&background:url(/imgextra/i1//TB2Ju0IaXXXXXbIXpXXXXXXXXXX_!!.png) no-
}
.shiyan_lsm:hover .shiyan_lsm03 {
&&left:1300
&&top:180
}
.shiyan_lsm .shiyan_lsm04 {
&&left:1200
&&top:550
&&background:url(/imgextra/i4//TB2uXFHaXXXXXaSXpXXXXXXXXXX_!!.png) no-
}
.shiyan_lsm:hover .shiyan_lsm04 {
&&left:1300
&&top:550
}
&/style&
&!--放导航CSS部分END--&
&!--放自定义部分--&
&div style=&height:743&&
&&&div class=&footer-more-trigger sn-simple-logo& style=&width:2041height:743padding:0left:50%;border:0;top:&&
& & &div class=&footer-more-trigger sn-simple-logo& style=&width:2041height:743padding:0left:-960border:0;top:z-index:2;&&
& && &&div class=&J_TWidget& data-title=&代码来自誓言 QQ&&& data-widget-type=&Carousel& data-widget-config=&{'duration':0.1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'nav_shiyan01','contentCls':'content_shiyan01','autoplay':true}& style=&position: &&
& && &&&&ul class=&content_shiyan01& style=&display: position: width: 999999 left: 0 &&
& && && & &li class=&ks-switchable-panel-internal283& style=&display: float: && &/li&
& && &&&&/ul&
& && &&&&ul class=&nav_shiyan01&&
& && && & &!--这里开始写内容部分--&
& && && & &li style=&width:950height:500&&
& && && && &&div class=&shiyan_lsm footer-more-trigger sn-simple-logo& style=&width:2041 height:743 padding:0 border:0;&&transition: all 1s;
&&-moz-transition: all 1s;
&&-webkit-transition: all 1s;
&&-o-transition: all 1s;
&&
& && && && &&&&a href=&& target=&_blank&&&div class=&shiyan_lsm01 footer-more-trigger sn-simple-logo& style=&width:405 height:314 padding:0 border:0; z-index:1;transition: all 1s;
&&-moz-transition: all 1s;
&&-webkit-transition: all 1s;
&&-o-transition: all 1s;
&&&/div& &/a&
& && && && && &&a href=&& target=&_blank&& &div class=&shiyan_lsm02 footer-more-trigger sn-simple-logo& style=&width:598 height:445 padding:0 border:0; z-index:2;transition: all 1s;
&&-moz-transition: all 1s;
&&-webkit-transition: all 1s;
&&-o-transition: all 1s;
&&&/div&
& && && && &&/a&
& && && && && &&a href=&& target=&_blank&&& &&div class=&shiyan_lsm03 footer-more-trigger sn-simple-logo& style=&width:232 height:286 padding:0 border:0; z-index:3;transition: all 1s;
&&-moz-transition: all 1s;
&&-webkit-transition: all 1s;
&&-o-transition: all 1s;
&&&/div&
& && && && & &/a&
& && && && && &&a href=&& target=&_blank&&&&&div class=&shiyan_lsm04 footer-more-trigger sn-simple-logo& style=&width:159 height:159 padding:0 border:0; z-index:4;transition: all 1s;
&&-moz-transition: all 1s;
&&-webkit-transition: all 1s;
&&-o-transition: all 1s;
&&&/div&&/a&
& && && && &&/div&& && && && &
& && && && &&!--这里开始写内容部分--&
& && && & &/li&
& && &&&&/ul&
& && &&/div&
& & &/div&
&&&/div&
&/div&
&/div&
&!--放自定义部分END--&复制代码
补充内容 ( 12:11):
因为图片都放在 CSS部分里面，所以装修状态是看不到效果的，要发布再看效果哈
补充内容 ( 17:15):
根据大家反应的，鼠标滑过才出现，移开是白背景，少了这段CSS，加上去你少了这段CSS，加上去
.shiyan_lsm {
&&background:url() 0px 0px no-
说来也奇怪，我帖子里面明明完整的，CSS最上面那段
14:06 上传
点击文件名下载附件
下载积分: 美工币 -2
1.15 KB, 下载次数: 374, 下载积分: 美工币 -2
美工币 +501
感谢分享！
超级大的启发
我想拜师。。。。。。。。。。.
这么叼，你媳妇造吗
很给力！请问是哪个电器店呢？不懂得应用在.
感谢分享！
大神大神，和渔舟那种级别的！.
感谢分享！
TA的每日心情抱抱 08:59签到天数: 172 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 97095, 距离下一级还需 2905 积分
中级会员, 积分 97095, 距离下一级还需 2905 积分
楼主&&请问下为什么你的店打开就是那种海报背景 而我的店里却是鼠标移上去才显示海报背景&&鼠标离开是白色 ...
你少了这段CSS，加上去.shiyan_lsm {
&&background:url(/imgextra/i4//TB2PkV1aXXXXXb_XXXXXXXXXXXX-.jpg) 0px 0px no-
}复制代码
TA的每日心情抱抱 08:59签到天数: 172 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 97095, 距离下一级还需 2905 积分
中级会员, 积分 97095, 距离下一级还需 2905 积分
天猫的能用吗
你可以试下，应该可以
美工币 +10
TA的每日心情抱抱 08:59签到天数: 172 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 97095, 距离下一级还需 2905 积分
中级会员, 积分 97095, 距离下一级还需 2905 积分
TA的每日心情烦 17:27签到天数: 214 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 44592, 距离下一级还需 55408 积分
中级会员, 积分 44592, 距离下一级还需 55408 积分
前排支持！
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情大哭 15:32签到天数: 194 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 54524, 距离下一级还需 45476 积分
中级会员, 积分 54524, 距离下一级还需 45476 积分
CSS 通过淘宝自带的J_TWidget 轮播类来引用
TA的每日心情烦 00:50签到天数: 1206 天连续签到: 1 天[LV.10]功行圆满主题帖子积分
阅读权限: 100
黄皮很酸吗？ 糖糖很甜吗？ 亲 我一下犯法吗？
ＮＢ啊！这让我不知所措...
&&&&&&挖掘淘宝Bug与代应用：&&&&&&
TA的每日心情烦6&天前签到天数: 695 天连续签到: 1 天[LV.9]已臻大成主题帖子积分
阅读权限: 50
没有什么问题是人民币解决不了的，如果有，那就美金
高级会员, 积分 122572, 距离下一级还需 377428 积分
高级会员, 积分 122572, 距离下一级还需 377428 积分
哇，誓言大神公布了，虽然可以用了，但是发生偏移了左边有一块空白，怎么改啊
本人比较懒，懒懒懒懒懒！
TA的每日心情抱抱 08:59签到天数: 172 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 97095, 距离下一级还需 2905 积分
中级会员, 积分 97095, 距离下一级还需 2905 积分
哇，誓言大神公布了，虽然可以用了，但是发生偏移了左边有一块空白，怎么改啊
帖子已经有说明了，改那个left值，你的是基础版吧，left:-960&&改为left:-1040
TA的每日心情烦6&天前签到天数: 695 天连续签到: 1 天[LV.9]已臻大成主题帖子积分
阅读权限: 50
没有什么问题是人民币解决不了的，如果有，那就美金
高级会员, 积分 122572, 距离下一级还需 377428 积分
高级会员, 积分 122572, 距离下一级还需 377428 积分
哇，誓言大神公布了，虽然可以用了，但是发生偏移了左边有一块空白，怎么改啊
误打误撞随便找了个left-960改成-1060居然正好可以用了，多谢誓言大神
本人比较懒，懒懒懒懒懒！
TA的每日心情烦6&天前签到天数: 695 天连续签到: 1 天[LV.9]已臻大成主题帖子积分
阅读权限: 50
没有什么问题是人民币解决不了的，如果有，那就美金
高级会员, 积分 122572, 距离下一级还需 377428 积分
高级会员, 积分 122572, 距离下一级还需 377428 积分
帖子已经有说明了，改那个left值，你的是基础版吧，left:-960&&改为left:-1040
好吧。。 改-1040了
本人比较懒，懒懒懒懒懒！
TA的每日心情抱抱 08:59签到天数: 172 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 97095, 距离下一级还需 2905 积分
中级会员, 积分 97095, 距离下一级还需 2905 积分
ＮＢ啊！这让我不知所措...
那就给俺加分吧，班猪
美工币 +10
注册账号后积极发帖的会员
经常帮助其他会员答疑
积极宣传本站，为本站带来更多的用户访问量
经常参与各类话题的讨论，发帖内容较有主见，在线时间达到720小时（30天）
任职天猫商城美工! 注意：申请此勋章，需先通过淘宝美工认证！
积极宣传本站，为本站带来更多注册会员
活跃且尽责职守的版主
淘宝皇冠店美工
任职淘宝皇冠店铺美工！注意：申请此勋章，需先通过淘宝美工认证！
淘宝钻级店美工
任职淘宝钻级店铺美工！注意：申请此勋章，需先通过淘宝美工认证！
Powered by分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
投稿：mdxy-dxy
字体：[ ] 类型：转载 时间：
今天整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果，有些是纯CSS3的，这些效果你完全可以用在你的网页上，让网站获得更好的体验
Animated Opening Type（教程）
漂亮的文字翻开效果，很有意思。
Direction-Aware Hover Effect With Css3 And Jquery（教程）
鼠标跟随悬停效果教程，话说以前看到这个很流行呢。
Css3 Hover Effects With Websymbols Tutorial（教程）
Magnifying Glass For Image Zoom Using Jquery And CSS3
通过Jquery 和 CSS3.实现放大镜效果。
Social Media Icons With CSS3 Hover Effects
通过CSS3实现3D旋转的社会化媒体图标。
Image Highlighting And Preview With Jquery（教程）
图像放大效果，适合文章用。
CSS3 HOver Effects style Restaurant Menus（教程）
使用CSS3实现的hover效果，鼠标结过列表图像时会显示简介。
Original Hover Effects with CSS3（教程）
超过10种鼠标悬停图像动画效果，酷、弦！
Simple Icon Hover Effects（教程）
简单的鼠标悬停效果
Shape Hover Effect With Svg（教程）
配合SVG实现的悬停动效。
3D Hover Effect for Thumbnails and Images
一个3D感的hover特效，连阴影也实现了。
Simple yet Amazing CSS3 Aorder Transition Effects
CSS3 边框过度效果。
Make a Simple Navigation With Hover Transitions
简单的导航菜单。
Examples of Pseudo-Elements Animtions And Transitions（教程）
看似很复杂的动效，但效果很弦。
Jquery Mouseover Effect Using Parallax Style Tutorial（教程）
这个教程可以实现带视差感的特效。
Css3 Hover Effect Tutorial With Image Circle（教程）
圆形鼠标hover特效。
Make a Swinging Hover Effect With CSS3 Animations（教程）
CSS3实现按钮旋转教程。
AnythingZoomer jQuery Plugin
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具关于鼠标移动在文字上面，让其显示详细信息 - ITeye问答
我将鼠标移动在一段文字上面，然后显示一段文字的详细信息，该怎么实现！！！
问题补充：andilyliao 写道div可以
代码怎么实现呢
把下面的代码保存成一个html文件，用浏览器打开试试：
function showTooltip(target) {
document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'block';
function hideTooltip(target) {
document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'none';
&label onmouseover='showTooltip(this);' onmouseout='hideTooltip(this);' id='label0'&把鼠标移到我上面看看...&/label&
&div id='tooltip0' style='display:border:1background-color:color:'&&p&这是一段文字的详细信息。。。&/p&&/div&
这个很简单啊 。。& 就是标签的title& 属性&
&div title="简介"&
这样就可以了！！
这样就可以了！！这样就可以了！！
&/div&
楼上的，我试了，不行啊，效果出不来啊
&div onclick="alert(this.innerText)"&Hello World!&/div&
&div onclick="alert(event.srcElement.innerText)"&Hello World!&/div&
已解决问题
未解决问题相关文章推荐
1.div内容:登录
2.css样式：
border-radius:4
我们在界面上经常会用到button按钮，但通常button点击后看不到点击的效果，如果用户连续点击了两次，就会报NAR错误，这样交互性就比较差了。如果我们自定义了button点击效果，比如我们点击了b...
1.效果图：
CSS实现鼠标滑过按钮更改按钮样式，方便简单：
border:1px solid #2b87c8;
border-rad...
方法一：效果图：
双击GridView的OnRowDataBound事件；
在后台的GridView1_RowDataBound()方法添加代码，最后代码如下所示：
protect...
欢迎大家我分享和推荐好用的代码段~~
欢迎转载，但请保留文章原始出处：
CSDN：http://www.csdn.net
在Winform的窗体中，存在背景图的情况下，不想在画面上加入按钮，只希望利用窗体自身的几个事件来实现按钮按下的效果，怎么样实现呢？
其实这也不难，只需要按照下列步骤即可实现，首先确定要按下的几个区...
首先看看网上的2种方法：
【以下为引用网络，来源：/thread-.html】
使用Button时为了让用户有“按下”的效果，有两...
首先看看网上的2种方法：
使用Button时为了让用户有“按下”的效果，有两种实现方式：
1.在代码里面。
view plaincopyprint?
他的最新文章
讲师：董晓杰
讲师：姚远
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}