纯CSS实现菜单、导航栏的3D翻转动画效果


Posted in HTML / CSS onApril 23, 2014

我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单。大家可以先看看实际效果,下面有效果截图。

效果图:

纯CSS实现菜单、导航栏的3D翻转动画效果

HTML代码

HTML内容是一些用作菜单的链接,我们在里面添加了一些额外的SPAN标记来帮助实现3D效果:

复制代码
代码如下:

<ul class="block-menu lazy ">
<li><a href="/" class="three-d lazy ">
Home
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Home</span>
<span class="back lazy ">Home</span>
</span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
Demos
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Demos</span>
<span class="back lazy ">Demos</span>
</span>
</a></li>
<!-- more items here -->
</ul>

在A链接标记旁边是一系列的SPAN元素,动画演示过程中,它将用来表现3D立方体的“正面”和“背面”。这些SPAN里的文字和A链接里的文字是一致的。

CSS代码

这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的,动的是SPAN标签,而且是最外层的SPAN标签,内部的SPAN标签被初始化在它的位置上,以后就不做任何变动。每个元素都可以向上翻,并要翻回来,我们使用的是CSS transforms。

复制代码
代码如下:

/* basic menu styles */
.block-menu {
display: block;
background: #000;
}</p> <p>.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}

如果你想看看正面和反面各自是如何旋转移动的,我强烈推荐你们试一下,将其中的一个设置为display: none,让鼠标悬停在它们上面,你将会看到它们各自将完成整个动画的哪一部分动作。

这种实现方式的唯一的缺点是有重复的菜单名称,虽然技术上是隐藏看不出来的,但从代码质量上说存在代码重复问题。然而,从视觉效果上看,它的动画非常顺滑,毫无瑕疵。没有JavaScript,Flash或canvas技术,只是一些简单的CSS标记,这技术CSS动画….一种我们web程序员都应该感谢的技术。

HTML / CSS 相关文章推荐
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
You might like
星际中的相关伤害
2020/03/04 星际争霸
2019十大人气国漫
2020/03/13 国漫
php 常用类整理
2009/12/23 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php图片添加水印例子
2016/07/20 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
javascript如何写热点图
2015/12/08 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JS中的三个循环小结
2017/06/20 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
python之wxPython菜单使用详解
2014/09/28 Python
Python实现控制台进度条功能
2016/01/04 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
解决python 找不到module的问题
2020/02/12 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
电子商务专业求职信
2014/07/10 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP