纯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色彩
Jan 16 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 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/04/09 欧美动漫
php目录操作实例代码
2014/02/21 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
用ADODB.Stream转换
2007/01/22 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
在C#中如何实现多态
2014/07/02 面试题
大学生年度自我鉴定
2013/10/31 职场文书
班级安全教育实施方案
2014/02/23 职场文书
开业典礼主持词
2014/03/21 职场文书
校庆口号
2014/06/20 职场文书
运动会加油稿100字
2014/09/19 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript