css实现翻转导航栏的效果
效果图如下
html代码如下
<nav>
<ul>
<li>
<div>
<span class="no1">爱情电影</span>
<span class="no2">爱情电影</span>
</div>
</li>
<li>
<div>
<span class="no1">动作电影</span>
<span class="no2">动作电影</span>
</div>
</li>
<li>
<div>
<span class="no1">科幻电影</span>
<span class="no2">科幻电影</span>
</div>
</li>
<li>
<div>
<span class="no1">武侠电影</span>
<span class="no2">武侠电影</span>
</div>
</li>
<li>
<div>
<span class="no1">喜剧电影</span>
<span class="no2">喜剧电影</span>
</div>
</li>
<li>
<div>
<span class="no1">奇幻电影</span>
<span class="no2">奇幻电影</span>
</div>
</li>
<li>
<div>
<span class="no1">恐怖电影</span>
<span class="no2">恐怖电影</span>
</div>
</li>
<li>
<div>
<span class="no1">悬疑电影</span>
<span class="no2">悬疑电影</span>
</div>
</li>
</ul>
</nav>
css代码如下
*{
margin: 0;
padding: 0;
}
nav{
width: 960px;
height: 40px;
background-color: aqua;
margin: 100px auto;
}
nav ul{
list-style: none;
}
nav ul li{
float: left;
width: 120px;
height: 40px;
}
nav ul li div{
width: 120px;
height: 40px;
position: relative;
-webkit-perspective: 6000px;
transition:all 0.4s ease 0s;
-webkit-transform-style:preserve-3d;
}
nav ul li:hover>div{
-webkit-transform: rotateX(-90deg);
}
nav ul li span{
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
}
nav ul li span.no1{
background-color: aquamarine;
-webkit-transform: translateZ(20px);
}
nav ul li span.no2{
background-color:gold;
-webkit-transform: rotateX(90deg) translateZ(20px);
}
css实现翻转导航栏的效果相关推荐
- css筋斗云,JavaScript实现精美个性导航栏筋斗云效果
实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLef ...
- 几种纯css布局的导航栏
1.垂直导航栏 页面效果 <ul class="nav"><li><a href="home.htm">Home</a ...
- 【前端】javascript实现导航栏筋斗云效果特效
实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...
- css+div实现导航栏
css+div实现导航栏 把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
- 搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
- html+css简单立体导航栏
html+css简单立体导航栏 一.简单立体导航栏效果 二.代码实现 1.html 2.css 一.简单立体导航栏效果 二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- android viewpager标题,ViewPager顶部导航栏联动效果(标题栏条目多)
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给Tab ...
- HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
最新文章
- POJ 3070 Fibonacci
- Android实时取景：用SurfaceView实现
- 二维码识别器PC版（电脑版）
- Redis之GEO存储地理位置信息
- 技术沙龙直播 | 数据库技术探索及行业应用
- Foundation框架: 5.常用结构体知识补充
- [UOJ50]链式反应
- cmd切换为administrator用户
- qjsonarray 合并_QJsonObject和QJsonArray的巨坑
- 广东省计算机一级常考选择题,广东省计算机一级选择题
- mongodb 副本集Replica Set的keyfile验证
- Is the American Dream Really Dead?
- 室内定位技术方案---Wifi、RFID、bluetooth、Zigbee
- 深入解析著名的阿里云Log4j 漏洞
- PostgreSQL中删除的数据能否恢复
- VMware 虚拟网卡防火墙问题
- 数据中心云化将是大势所趋 | 工信部称1亿以上用户信息泄露为特大网络安全事件
- 矩阵的entry 和element？
- 上班没事做gai这么办
- 2012年近期新技术的应用----地平线报告(2012高等教育版)