纯css3响应式3d翻转菜单
来源:互联网 发布:薛之谦胡彦斌 知乎 编辑:程序博客网 时间:2024/06/11 05:22
周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单,3d响应式菜单,希望对大家有所帮助。
在线欣赏效果,在线编辑代码,或者下载收藏。
html文件如下
<ul class="menu"> <li><a title="网站首页" href="#">网站首页</a> </li> <li><a title="行业洞察" href="#">行业洞察</a> </li> <li><a class="cur" title="解决方案" href="#">解决方案</a> </li> <li><a title="产品商场" href="#">产品商场</a> </li> <li><a title="技术支持" href="#">技术支持</a> </li> <li><a title="媒体中心" href="#">媒体中心</a> </li> <li><a title="加入我们" href="#">加入我们</a> </li> <li><a title="关于我们" href="#">关于我们</a> </li></ul>然后是css,在codepen里我使用了css reset和prefix-free,在线案例里,使用了简单粗暴的重置,大家见谅。
在整个案例中,3d翻转的核心在于两点,一是3d盒子的绘制,我们利用:before,:after两个伪对象各做一个面,然后X轴负旋转形成盒子;二是hover翻转的实现,hover之后对整个盒子作翻转(X轴正旋转)。实现原理如下图所示。
/* * 简单粗暴的CSS重置 * */*, *:before, *:after {padding: 0;margin: 0;box-sizing: border-box;}/* * 菜单设置,宽、高、位置、阴影 * */.menu {list-style: none;width: 960px;height: 40px;margin: 50px auto;box-shadow: 0 0 4px rgba(0, 0, 0, .5);}/* * 菜单项设置 * fll,li脱离标准流,形成水平菜单 * */.menu li {float: left;}/* * 菜单项链接设置,关键设置,菜单的主要表现体现在这里 * 设置宽、高、背景色、文字大小、文字颜色、文字居中、文字装饰、边框 * transition过渡 * 3d transform属性,transform-style、transform-origin * 部分代码写到了组合选择器里 * */.menu li a {display: inline-block;color: #666;background-color: #eee;text-decoration: none;position: relative;}/* * before和after伪类形成两个面,我们需要给他们不同的颜色、背景色,不同的旋转角度 * */.menu li a::before {content: attr(title);color: #888;background-color: #aaa;position: absolute;left: 0;top: 0;transform: rotateX(-90deg);}.menu li a::after {content: attr(title);color: #fff;background-color: #666;position: absolute;left: 0;top: 0;transform: rotateX(-180deg);}.menu li a, .menu li a::before, .menu li a::after {width: 120px;height: 40px;text-align: center;font-size: 14px;line-height: 40px;border: 1px solid #ddd;border-width: 0 1px 0 0;transition: all 1s;transform-style: preserve-3d;transform-origin: center center -20px;}/* * hover之后表现 * */.menu li:hover a, .menu li a.cur {transform: rotateX(178deg);}/* * 响应式布局 * 我们需要几个状态,900+,768-900,480-768,320-480,320- * 不同状态下,我们主要实现菜单项的不同宽度 * 768-900,整个菜单铺满屏幕,1行8列 * */@media (max-width: 900px) {.menu {width: 100%;height: 40px;}.menu li {width: 12.5%;}.menu li a, .menu li a::before, .menu li a::after {width: 100%;}}/* * 响应式布局 * 480-768,整个菜单铺满屏幕,2行4列 * */@media (max-width: 768px) {.menu {width: 100%;height: 80px;}.menu li {width: 25%;}.menu li a, .menu li a::before, .menu li a::after {width: 100%;border-width: 0 1px 1px 0;}}/* * 响应式布局 * 320-480,整个菜单铺满屏幕,4行2列 * */@media (max-width: 480px) {.menu {width: 100%;height: 160px;}.menu li {width: 50%;}.menu li a, .menu li a::before, .menu li a::after {width: 100%;border-width: 0 1px 1px 0;}}/* * 响应式布局 * 320-,整个菜单铺满屏幕,8行1列 * */@media (max-width: 320px) {.menu {width: 100%;height: 320px;}.menu li {width: 100%;}.menu li a, .menu li a::before, .menu li a::after {width: 100%;border-width: 0 0 1px 0;}}
That's it, Thank you.
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------
28 0
- 纯css3响应式3d翻转菜单
- CSS3 实现导航菜单的 3D 翻转动画效果
- 纯CSS3 3D图片向上翻转渐隐消失动画DEMO演示
- HTML5+CSS3立方体3D翻转效果
- css3制作3d翻转效果
- css3实现图片3d翻转效果
- 纯css3实现的3D按钮
- 纯css3 实现3D轮播图
- CSS3设计响应式导航菜单
- 用CSS3设计响应式导航菜单
- 用CSS3设计响应式导航菜单
- css3三维动画菜单上下翻转
- CSS3实现3D旋转菜单导航
- 纯HTML+CSS3 导航菜单
- 纯css3设计下拉菜单
- 纯CSS3实现动感菜单
- 利用 css3 的图形3d翻转效果应用demo
- CSS3 animate实现图片墙3D翻转效果
- poj 2828 Buy Tickets
- lsof用法简介
- 唯有坚持。
- 图的邻接矩阵的建立以及遍历
- (2014)编程之美初赛第一场
- 纯css3响应式3d翻转菜单
- Ubuntu x86 64 settup nginx rtmp server
- mysql内存使用分析
- nyoj 220 推桌子
- 设备IO
- leetcode第一刷_Binary Tree Postorder Traversal
- linux几个经常使用的命令
- 日版(SoftBank, AU) iPhone5回国使用攻略调查
- 梅州“天华专区-高清影院-动作战争”《英雄本色3》《低俗小说》无法点播。此影片在中心试没有的,在地市正常状态也应该是没有的,但是梅州还在上架里。