纯css3响应式3d翻转菜单
周末快乐哈,今天来看一个纯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轴正旋转)。实现原理例如以下图所看到的。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2hxZXQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
/*
* 简单粗暴的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前端开发技术。分享网页相关资源。
---------------------------------------------------------------
纯css3响应式3d翻转菜单的更多相关文章
- 纯css3开发的响应式设计动画菜单(支持ie8)
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- Mega Dropdown - 带子分类的响应式下拉菜单
当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- 一款纯css3实现的环形导航菜单
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览 ...
- 纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
随机推荐
- AGC 022 C - Remainder Game
题面在这里! 显然权值是 2^i 这种的话就是要你贪心,高位能不选就不选. 并且如果 % x 之后再去 % 一个>=x的数是没有用的,所以我们可以把操作的k看成单调递减序列. 这样的话就是一个有 ...
- 【DFS】奇怪的电梯
奇怪的电梯 题目描述 有一天桐桐做了一个梦,梦见了一种很奇怪的电梯.大楼的每一层楼都可以停电梯,而且第i层楼(1≤i≤N)上有一个数字K:(0≤Ki≤N).电梯只有四 个按钮:开,关,上,下.上下的层 ...
- hibernate双向ManyToMany映射
工作需要一个双向多对多映射,照着李刚的书做了映射,碰到了一些问题,现就问题及解决方案进行总结归纳. 1.首先奉上最初代码 Person5.java @Entity @Table(name = &quo ...
- Problem C: 更改大小写
#include<stdio.h> int main() { ; ]; gets(a); while(a[i]!='\0') { ; ++i; } printf("%s" ...
- [转]SpringMVC拦截器详解[附带源码分析]
目录 前言 重要接口及类介绍 源码分析 拦截器的配置 编写自定义的拦截器 总结 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:ht ...
- Codeforces Round #345 (Div. 2) A. Joysticks dp
A. Joysticks 题目连接: http://www.codeforces.com/contest/651/problem/A Description Friends are going to ...
- sqlserver 脚本 多条记录遍历
临时表方式实现多条记录遍历 declare @oper_cart_item_id bigint; declare @oper_cart_id bigint; declare @the_last_cha ...
- Java原始封装常用HttpRequest
1. package com.jsoft.testjavathread.test1; import java.io.BufferedReader; import java.io.IOException ...
- [典型漏洞分享]YS的防暴力破解设计存在缺陷
YS使用的防暴力破解机制存在缺陷,该缺陷可被用于暴力破解其它用户密码[高] 问题描述: YS在用户登录页面设置了验证码机制,当用户输入密码错误次数达到3次时,再次登录需要验证码以防止攻击者进行暴力破解 ...
- C语言基本数据类型简介
1.概述 C 语言包含的数据类型如下图所示: 2.各种数据类型介绍 2.1整型 整形包括短整型.整形和长整形. 2.1.1短整形 short a=1; 2.1.2整形 一般占4个字节(32位),最高位 ...