CSS3实现翻转导航条特效
CSS3 实现翻转导航条特效
效果如下:
HTML 代码:
<ul> <li> <span class="no1">码云笔记</span> <span class="no2">码云笔记</span> </li> <li> <span class="no1">前端博客</span> <span class="no2">前端博客</span> </li> <li> <span class="no1">前端开发</span> <span class="no2">前端开发</span> </li> <li> <span class="no1">前端教程</span> <span class="no2">前端教程</span> </li> </ul>
CSS 代码:
* { /*清除默认样式*/ margin: 0; padding: 0; list-style: none; border: 0; } ul { /*设置大盒子的大小,背景颜色,居中*/ width: 600px; background: #F90; color: #fff; margin: 50px auto; } li { /*设置小盒子的大小,向左浮动,保存嵌套元素的 3D 空间 ,3D 距离*/ width: 150px; height: 40px; transition: all 0.4s ease 0s; float: left; position: relative; transform-style: preserve-3d; perspective: 6000px } li:hover { /*使他沿 X 轴逆旋转 90 度*/ transform: rotateX(-90deg); } span { /*设置盒子大小,行高,字体居中,绝对定位*/ width: 150px; height: 40px; line-height: 40px; text-align: center; position: absolute; top: 0; left: 0; } li .no1 { background: #F60; transform: translateZ(20px); } li .no2 { background: #39F; transform: rotateX(90deg) translateZ(20px); }
更多前端特效代码,请关注码云笔记技术博客,每日为你整理分享最好的前端知识。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS3实现翻转导航条特效
码云笔记 » CSS3实现翻转导航条特效