案例-翻转的导航栏（CSS3）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-翻转的导航栏</title><style>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {float: left;width: 120px;height: 35px;margin-left: 5px;list-style: none;/*  给box 旋转  需要透视  直接给li 加  里面的子盒子都有透视效果*/perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all 0.5s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.front {background-color: skyblue;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;/*    我们如果有移动 或者其他样式，必须先写我们的移动 */transform: translateY(17.5px) rotateX(-80deg);}</style></head><body><ul><li><div class="box"><div class="front"></div><div class="bottom"></div></div></li></ul><ul><li><div class="box"><div class="front"></div><div class="bottom"></div></div></li></ul><ul><li><div class="box"><div class="front"></div><div class="bottom"></div></div></li></ul><ul><li><div class="box"><div class="front"></div><div class="bottom"></div></div></li></ul><ul><li><div class="box"><div class="front"></div><div class="bottom"></div></div></li></ul><ul><li><div class="box"><div class="front"></div><div class="bottom"></div></div></li></ul></body></html>

案例-翻转的导航栏（CSS3）相关推荐

406day（京东案例顶部，导航栏练习）
<2018年11月14日>[连续406天] 标题:京东案例顶部,导航栏练习: 内容: <div class="J_event&qu ...
前端小案例之3D导航栏
简单3D导航栏案例-鼠标经过盒子时底部盒子旋转最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家. 文章目录简单3D导航栏案例-鼠标经过盒子时底部盒子旋转一 ...
综合案例：新浪微博导航栏，产品模块，快报模块
新浪微博导航栏 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
css漂亮的侧导航栏,CSS3实现的可缩进的侧栏导航菜单
本文介绍一个可缩进的侧栏导航菜单,使用纯CSS3实现. CSS3实现的可缩进的侧栏导航菜单侧栏导航的HTML代码下面是侧栏导航的HTML代码,主要是使用UL-LI结构.注意到还用了一个SVG代码, ...
CSS课堂案例3-小米导航栏
简洁版小米侧边栏要求实现的效果,左侧红框部分思路分成两步: 把链接a转换为块级元素,这样链接就可以单独占一行,并且可以设置高度和宽度鼠标经过a链接时,设置背景颜色代码 <!DOCTYPE ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
html左侧导航菜单多级,css3多级菜单导航栏、侧边菜单栏
一.简单的导航栏首先通过一个入门级的导航栏来练习一下 1.先布局好html的结构 2.通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理,在不同过js的情况下,就可以轻松 ...
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
上一节:电商项目实战第二节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[搜索框那一栏] 文章目录 [考拉海购网站]之[分类导航栏] 第一步,分析页面布局第二步,写需要的html标签 i ...
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的示例代码: <!DOCTYPE html> <html lang ...

案例-翻转的导航栏（CSS3）

案例-翻转的导航栏（CSS3）

案例-翻转的导航栏（CSS3）相关推荐

最新文章

热门文章