CSS3实现可翻转的hover效果,具体代码如下所示:
1.css
/*基础样式*/ 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效果 前后翻转*/ #nav1 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav1 ul li:hover { transform: translateZ(30px) rotateX(360deg) scale(1.1); -webkit-transform: translateZ(30px) rotateX(360deg) scale(1.1); -ms-transform: translateZ(30px) rotateX(360deg) scale(1.1); -moz-transform: translateZ(30px) rotateX(360deg) scale(1.1); } /*#nav2鼠标hover效果 上浮*/ #nav2 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav2 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效果 下浮*/ #nav4 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav4 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效果 左右翻转*/ #nav3 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav3 ul li:hover { transform: translateZ(30px) rotateY(360deg) scale(1.1); -webkit-transform: translateZ(30px) rotateY(360deg) scale(1.1); -ms-transform: translateZ(30px) rotateY(360deg) scale(1.1); -moz-transform: translateZ(30px) rotateY(360deg) scale(1.1); } /*button1 hover效果*/ btn1 { background-color: #1AAB8A; color: white; font-size: 18px; height: 60px; width: 150px; border: 0; transition: 800ms ease all; outline: none; position: relative; } btn1:hover { background: #fff; color: #1AAB8A; } btn1:before, .btn1:after { content: ''; position: absolute; height: 2px; width: 0; background: #1AAB8A; transition: 400ms ease all; } btn1:before { right: 0; top: 0; } btn1:after { left: 0; bottom: 0; } btn1:hover:before, .btn1:hover:after { width: 100%; transition: 800ms ease all; }
2.html
<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>css3</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>css3</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>css3</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>css3</a> </li> </ul> </div> <div class="dis-block"> <p>按钮hover效果</p> <button class="btn1" type="button">hover!</button> </div>
效果:
总结
以上所述是小编给大家介绍的CSS3实现可翻转的hover效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...