CSS3实现翻转导航条特效

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);
}

更多前端特效代码,请关注码云笔记技术博客,每日为你整理分享最好的前端知识。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS3实现翻转导航条特效

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们