纯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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python守护进程和脚本单例运行详解
2017/01/06 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
浅谈django channels 路由误导
2020/05/28 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
人力资源部经理助理岗位职责
2014/03/04 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
企业安全生产承诺书
2014/05/22 职场文书
任命书怎么写
2014/06/04 职场文书
岗位说明书标准范本
2014/07/30 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript