前端学习

2024-05-31 01:24| 来源: 网络整理| 查看: 265

纯CSS实现动态翻转导航条

在学习动画的时候，一开始不知道写一个生命东西来进行学习，后来在网上看到了一些CSS实现的动画效果，觉得很酷炫，就在其中选了导航条来进行学习，导航条比较基础而且用的比较多，以后的学习也基本采用这种基础且广泛的进行学习。我也是学习的，所以这些效果也不是原创的。话不多说，直接开始。

HTML方面：

HTML方面比较简单，只需要一个nav，ul和若干li，a，p标签即可。

首页

Home

首页

Home

首页

Home

首页

Home

首页

Home

CSS方面：

首先肯定是先设置最外层的nav的样式。

.nav { width:722px; margin:50px auto; background-color:#6cf; border:1px #ccc solid; }

利用伪类来设置一些属性。

.nav:after { clear:both; display:block; overflow:hidden; content:""; }

其次设置列表li的样式。让其能横向显示为正常的导航条。

ul li{ width: 140px; height: 60px; list-style: none; float: left; margin-right: 2px; margin-left: 2px; background-color: chartreuse; }

再来是通用a和p标签。其中还设置了变换的的属性和时间等

a{ text-decoration: none; display: block; height: 60px; transform-style:preserve-3d; transition:all .5s; } p{ height: 60px; line-height:60px; color:#fff; text-align:center; font-size:20px; transition:all .5s; }

再来是p标签里面第一个和最后一个p标签的样式，把两个p标签设置成呈90度相交的两个平面。其中注意

p:first-child{ background-color:#090; transform:translateZ(30px); } p:last-child{ background-color:#009; transform:translateZ(30px) rotateX(-90deg); margin-top: -30px; }

最后是动态变换的，当鼠标在a标签上面的时候触发事件。

a:hover{ transform:rotateX(90deg); } a:hover p:last-child{ margin-top: 0; transform: translateZ(0) rotateX(-90deg); }

这样一个纯CSS 3D动态导航条就完成了。本文代码模仿来自 http://www.jq22.com/webqd3864，可在该地址上看到对应的效果。

【本文地址】

公司简介

联系我们