CSS3实现可翻转的hover效果
发布时间:2018-05-23 09:49:11 作者:佚名 我要评论
本文给大家分享基于css3实现可翻转的hover效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
CSS3实现可翻转的hover效果,具体代码如下所示:
1.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | /*基础样式*/ html { font-family : sans-serif ; -ms-text-size-adjust: 100% ; -webkit-text-size-adjust: 100% ; } body { margin : 0 auto ; text-align : center ; background-color : #FFFFCC ; } ul { list-style : none ; float : left ; margin : 0 ; padding : 0 ; } a { cursor : pointer ; } div { display : inline- block ; margin : 40px ; } ul li { width : 200px ; height : 40px ; line-height : 40px ; text-align : center ; margin : 10px ; background-color : #747474 ; border-radius: 4px ; color : white ; } dis- block { display : block ; } /*#nav1鼠标hover效果 前后翻转*/ #nav 1 ul li { transform-style: preserve -3 d; -webkit-transform-style: preserve -3 d; -ms-transform-style: preserve -3 d; -moz-transform-style: preserve -3 d; transition: 0.5 s; -webkit-transition: 0.5 s; -ms-transition: 0.5 s; -moz-transition: 0.5 s; } #nav 1 ul li:hover { transform: translateZ( 30px ) rotateX( 360 deg) scale( 1.1 ); -webkit-transform: translateZ( 30px ) rotateX( 360 deg) scale( 1.1 ); -ms-transform: translateZ( 30px ) rotateX( 360 deg) scale( 1.1 ); -moz-transform: translateZ( 30px ) rotateX( 360 deg) scale( 1.1 ); } /*#nav2鼠标hover效果 上浮*/ #nav 2 ul li { transform-style: preserve -3 d; -webkit-transform-style: preserve -3 d; -ms-transform-style: preserve -3 d; -moz-transform-style: preserve -3 d; transition: 0.5 s; -webkit-transition: 0.5 s; -ms-transition: 0.5 s; -moz-transition: 0.5 s; } #nav 2 ul li:hover { transform: translateZ( 30px ) scale( 1.1 ); -webkit-transform: translateZ( 30px ) scale( 1.1 ); -ms-transform: translateZ( 30px ) scale( 1.1 ); -moz-transform: translateZ( 30px ) scale( 1.1 ); } /*#nav4鼠标hover效果 下浮*/ #nav 4 ul li { transform-style: preserve -3 d; -webkit-transform-style: preserve -3 d; -ms-transform-style: preserve -3 d; -moz-transform-style: preserve -3 d; transition: 0.5 s; -webkit-transition: 0.5 s; -ms-transition: 0.5 s; -moz-transition: 0.5 s; } #nav 4 ul li:hover { transform: translateZ( 30px ) scale( 0.9 ); -webkit-transform: translateZ( 30px ) scale( 0.9 ); -ms-transform: translateZ( 30px ) scale( 0.9 ); -moz-transform: translateZ( 30px ) scale( 0.9 ); } /*#nav3鼠标hover效果 左右翻转*/ #nav 3 ul li { transform-style: preserve -3 d; -webkit-transform-style: preserve -3 d; -ms-transform-style: preserve -3 d; -moz-transform-style: preserve -3 d; transition: 0.5 s; -webkit-transition: 0.5 s; -ms-transition: 0.5 s; -moz-transition: 0.5 s; } #nav 3 ul li:hover { transform: translateZ( 30px ) rotateY( 360 deg) scale( 1.1 ); -webkit-transform: translateZ( 30px ) rotateY( 360 deg) scale( 1.1 ); -ms-transform: translateZ( 30px ) rotateY( 360 deg) scale( 1.1 ); -moz-transform: translateZ( 30px ) rotateY( 360 deg) scale( 1.1 ); } /*button1 hover效果*/ btn 1 { background-color : #1AAB8A ; color : white ; font-size : 18px ; height : 60px ; width : 150px ; border : 0 ; transition: 800 ms ease all ; outline : none ; position : relative ; } btn 1: hover { background : #fff ; color : #1AAB8A ; } btn 1: before, .btn 1: after { content : '' ; position : absolute ; height : 2px ; width : 0 ; background : #1AAB8A ; transition: 400 ms ease all ; } btn 1: before { right : 0 ; top : 0 ; } btn 1: after { left : 0 ; bottom : 0 ; } btn 1: hover:before, .btn 1: hover:after { width : 100% ; transition: 800 ms ease all ; } |
2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <div id= "nav1" > <p>前后翻转</p> <ul> <li> <a>home</a> </li> <li> <a>js</a> </li> <li> <a>jquery</a> </li> <li> <a>div+css</a> </li> <li> <a>css 3 </a> </li> </ul> </div> <div id= "nav2" > <p>上浮</p> <ul> <li> <a>home</a> </li> <li> <a>js</a> </li> <li> <a>jquery</a> </li> <li> <a>div+css</a> </li> <li> <a>css 3 </a> </li> </ul> </div> <div id= "nav4" > <p>下浮</p> <ul> <li> <a>home</a> </li> <li> <a>js</a> </li> <li> <a>jquery</a> </li> <li> <a>div+css</a> </li> <li> <a>css 3 </a> </li> </ul> </div> <div id= "nav3" > <p>左右翻转</p> <ul> <li> <a>home</a> </li> <li> <a>js</a> </li> <li> <a>jquery</a> </li> <li> <a>div+css</a> </li> <li> <a>css 3 </a> </li> </ul> </div> <div class= "dis-block" > <p>按钮hover效果</p> <button class= "btn1" type= "button" >hover!</button> </div> |
效果:
总结
以上所述是小编给大家介绍的CSS3实现可翻转的hover效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例,具有一定的参考价值,有兴趣的可以了解一下2017-08-10
- 这是一款使用CSS3制作鼠标hover图片遮罩层动画特效,在鼠标hover图片时,会生成一个不同颜色的遮罩层,并显示文字2017-06-27
- 这是一套鼠标hover按钮动画特效代码。5种效果,在结构布局上使用flex来进行布局,并通过css transition来实现动画效果,欢迎下载2017-04-10
- 本文主要介绍了CSS3制作hover下划线动画的方法步骤。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-27
16种基于css3 Bootstrap图片hover悬停遮罩效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果。共16种特效遮罩,欢迎下载2017-03-13- 是一款基于jQuery+css3实现的鼠标经过遮罩图片会出现翻转特效的代码,效果非常大方时尚,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-05-21
- 鼠标hover 以后,图片上面出现一个遮罩透明度变化,显示设置好的文字,完全使用css 实现,效果如下,喜欢的朋友可以参考下2013-11-05
- CSS3创意按钮鼠标经过翻转特效是一款分为4种颜色和3种尺寸大小,并且在鼠标滑过按钮时带有炫酷的翻转效果,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用2016-11-14
- 纯CSS3 3D魔方翻转动画特效源码是一款使用简单纯CSS3代码实现的魔方特效下载,效果非常棒,本段代码适应于所有网页使用,有需要的朋友可以直接下载使用2016-08-10
- 这是一款基于纯css3实现的鼠标滑过图片左右3d翻转效果源码。鼠标滑过图片可见图片呈现出翻转的效果,该3d翻转效果由纯css3实现,不含任何js元素2016-07-25
最新评论