纯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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 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
php中的MVC模式运用技巧
2007/05/03 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript new fun的执行过程
2010/08/05 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
layui导航栏实现代码
2017/05/19 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python对json的相关操作实例详解
2017/01/04 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python图书管理系统
2020/04/05 Python
Python3实现转换Image图片格式
2018/06/21 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Java面试笔试题大全
2016/11/23 面试题
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
windows系统安装配置nginx环境
2022/06/28 Servers