<style type="text/css">
.lrcBox{position:relativeheight:400pxwidth:400pxdisplay:blockoverflow:hiddenborder:1px solid #60Ffont-size:12px}
.lrcBox .top{display:blockposition:absoluteheight:30pxwidth:100%top:0pxz-index:2background:url(lrc_cover_big_04640cde.png) no-repeat left top}
.lrcBox .warp{display:blockpadding:10pxbackground-color:#fffheight:100%}
.lrcBox .body{display:bolockwidth:100%height:100%background-color:#39F}
.lrcBox .body ul,.lrcBox .body li{display:blocklist-style:nonepadding:0margin:0text-align:center}
.lrcBox .body ul{ width:100%}
.lrcBox .body li{ padding-top:3pxpadding-bottom:3px}
.lrcBox .bottom{display:blockposition:absoluteheight:30pxwidth:100%bottom:0pxz-index:2background:url(lrc_cover_big_04640cde.png) no-repeat left bottom}
</style>
<div class="lrcBox">
<!--上边的渐变背景层-->
<div class="top"></div>
<!--歌词层-->
<div class="warp">
<div class="body">
<ul>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
</ul>
</div>
</div>
<!--下边的渐变背景层-->
<div class="bottom"></div>
</div>
至于lrc_cover_big_04640cde.png这张图片你可以自己做，也可以到百度首页随心听的图片资源中找到，下载就可以。
1.boder-radis圆角的制作
2.linear-gradient渐变背景的制作
3.box-shadow阴影效果的制作
4.transition转换效果的制作
5.transparent透明效果
6.CCS3中before的作用
实现的效果图如下：
搭建HTML容器
一级菜单ul的样式修饰：
设置一级菜单的宽度、整体居中显示、用border设置颜色为#222的1像素宽的边框、用background-color设置背景颜色为#111、用background-image和linear-gradient设置背景图片为#444和#111的渐变效果、用border-radius设置圆角边框为6px、用before和after的方式给一级ul填充内容是清除二级浮动的一种方式保证背景能够包裹所有ul内的元素
.top-nav{width:969pxmargin:60px autoborder:1px solid #222background-color:#111 background-image:linear-gradient(#444,#111)border-radius:6pxbox-shadow:0 1px 1px #777 padding:0list-style:none} .top-nav:before,.top-nav:after{content: ""display: table} .top-nav:after{clear: both}
一级菜单内li的样式修饰：
用float将所有的li左浮动、用boder-right给每一个li制作一个左边框效果、用box-shadow制作阴影效果、position：relative是为了下面二级菜单的显示二级菜单会以absolute的方式定位
.top-nav li{float: leftborder-right:1px solid #222box-shadow:1px 0 0 #444position: relative}
一级菜单内li中a元素以及鼠标移动到a元素上之后的样式修饰
这些属性比较简单，就不作一一介绍了
.top-nav li a{float:lefttext-decoration: nonepadding:12px 30pxfont-size:12pxfont-weight:boldtext-shadow: 0 2px 0 #000color: #999} .top-nav li a:hover{color: #fafafa}
二级菜单ul的样式修饰
二级菜单默认是隐藏状态，用绝对定位的方式（相对于一级菜单）将二级菜单定位在top:38pxleft:0的位置上、同样给二级菜单设置渐变背景色和阴影的效果box-shadow中的rgba属性可以制作透明度的效果、用opacity这是透明级别为0、用transition制作一个过度显示和隐藏的效果
.top-nav li ul{visibility: hiddenposition: absolutelist-style: nonetop:38pxleft: 0z-index: 1padding: 0 background-color: #444background-image: linear-gradient(#444,#111)box-shadow: 0 -1px 0 rgba(255,255,255,.3)border-radius: 3pxopacity: 0margin: 20px 0 0 0transition: all .2s ease-in-out }
当鼠标移动到一级菜单栏的时候二级菜单栏显示
hover属性的应用
.top-nav li:hover >ul{opacity: 1visibility: visiblemargin: 0}
设置二级菜单li和a的样式
方法和一级菜单的li和a的修饰差不多，不做过多的解释
.top-nav ul li{float: nonedisplay: blockborder: 0box-shadow: 0 1px 0 #111,0 2px 0 #666} .top-nav ul a{padding: 10pxwidth: 130pxdisplay: blockfloat: none} .top-nav ul a:hover{background-color: #0186babackground-image: linear-gradient(#04acec,#0186ba)} .top-nav ul li:first-child >a{border-radius: 3px 3px 0 0} .top-nav ul li:last-child >a{border-radius: 0 0 3px 3px}
三角形的制作
用css3制作三角形的的方法就是四边设置同样宽度的border，将要保留的那一边的border设置颜色，其他三边的颜色设置为透明(transparent)，则保留颜色的那一边的三角形就制作出来了
.top-nav ul li:first-child >a:before{ content: ""position: absoluteleft:40pxtop: -6px display: blockwidth: 0border-bottom: 6px solid #444border-left: 6px solid transparent border-right: 6px solid transparent } .top-nav ul li:first-child >a:hover:before{border-bottom-color:#04acec}
三级菜单位置的变换
将三级菜单定位到二级菜单的右边显示
.top-nav ul ul{top:0left: 150pxmargin: 0 0 0 20pxbox-shadow: -1px 0 0 rgba(255,255,255,.3)} .top-nav ul ul li:first-child a:before{left: -6pxtop: 50%margin-top: -6pxborder-left: 0border-bottom: 6px solid transparent border-top: 6px solid transparentborder-right: 6px solid #3b3b3b} .top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3border-bottom-color:transparent}
完整代码(其中有针对IE6的兼容性处理)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!--<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>--> <title>用CSS3实现动画效果的制作</title> <style type="text/css"> .top-nav{width:969pxmargin:60px autoborder:1px solid #222background-color:#111 background-image:linear-gradient(#444,#111)border-radius:6pxbox-shadow:0 1px 1px #777 padding:0list-style:none} .top-nav:before,.top-nav:after{content: ""display: table} .top-nav:after{clear: both} /*针对IE6,_margin，_height是针对IE6的,其他浏览器中不需要*/ .top-nav{z-index: 1} .top-nav li{float: leftborder-right:1px solid #222box-shadow:1px 0 0 #444position: relative} .top-nav li a{float:lefttext-decoration: nonepadding:12px 30pxfont-size:12pxfont-weight:bold text-shadow: 0 2px 0 #000color: #999} .top-nav li a:hover{color: #fafafa} .top-nav li ul{visibility: hiddenposition: absolutelist-style: nonetop:38pxleft: 0z-index: 1padding: 0 background-color: #444background-image: linear-gradient(#444,#111)box-shadow: 0 -1px 0 rgba(255,255,255,.3) border-radius: 3pxopacity: 0margin: 20px 0 0 0transition: all .2s ease-in-out _margin:0 } .top-nav li:hover >ul{opacity: 1visibility: visiblemargin: 0} .top-nav ul li{float: nonedisplay: blockborder: 0box-shadow: 0 1px 0 #111,0 2px 0 #666} .top-nav ul a{padding: 10pxwidth: 130pxdisplay: blockfloat: none_height:10px} .top-nav ul a:hover{background-color: #0186babackground-image: linear-gradient(#04acec,#0186ba)} .top-nav ul li:first-child >a{border-radius: 3px 3px 0 0} .top-nav ul li:last-child >a{border-radius: 0 0 3px 3px} .top-nav ul li:first-child >a:before{ content: ""position: absoluteleft:40pxtop: -6px display: blockwidth: 0border-bottom: 6px solid #444border-left: 6px solid transparent border-right: 6px solid transparent } .top-nav ul li:first-child >a:hover:before{border-bottom-color:#04acec} .top-nav ul ul{top:0left: 150pxmargin: 0 0 0 20px_margin:0box-shadow: -1px 0 0 rgba(255,255,255,.3)} .top-nav ul ul li:first-child a:before{left: -6pxtop: 50%margin-top: -6pxborder-left: 0border-bottom: 6px solid transparent border-top: 6px solid transparentborder-right: 6px solid #3b3b3b} .top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3border-bottom-color:transparent} </style> <script type="text/javascript"> <!--针对IE6处理hover的问题-->// $(function () { // if($.browser.msie &&$.broswer.version.substr(0,1)<7){ // $("li").has("ul").mouseover(function () { // $(this).children("ul").css("visibility","visible")// }).mouseout(function () { // $(this).children("ul").css("visibility","hidden")// })// } // }) </script></head><body><ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心 +</a> <ul> <li><a href="#">视频学习</a> <ul> <li><a href="#">css</a></li> <li><a href="#">js</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">关于我们</a></li></ul></body>
前端时间用 animation 实现 H5 页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留 700ms 后再缩小至顶部。代码如下
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" >
<script type="text/javascript" src="
<title>首页加载动画</title>
<head>
<style>
.welcome-main{
display: none
padding-bottom: 40px
}
.top-info{
width: 100%
position: absolute
left: 0
top: 93px
}
.wec-img{
width: 175px
height: 175px
position: relative
padding: 23px
box-sizing: border-box
margin: 0 auto
}
.wec-img:before{
content: ''
position: absolute
left: 0
top: 0
width: 100%
height: 100%
background: url("./images/kf-welcome-loading.png")
background-size: 100%
}
.wec-img .img-con{
width: 100%
height: 100%
border-radius: 50%
/*box-sizing: border-box*/
background: url("./images/kf_1.jpg")
background-size: 100%
padding: 1px
}
.wec-img .img-con img{
width: 100%
height: 100%
border-radius: 50%
}
.loaded .wec-img{
-webkit-transform-origin: center top
}
.loading.welcome-main{
display: block
}
.loading .wec-img{
-webkit-animation:fadeIn .3s ease both
}
.loading .wec-img:before{
-webkit-animation:rotate .6s .2s linear both
}
.loaded .top-info{
-webkit-animation:mainpadding 1s 0s ease both
}
.loaded .wec-img{
-webkit-animation:imgSmall 1s 0s ease both }
@-webkit-keyframes mainpadding{
0%{-webkit-transform:translateY(0)
}
100%{-webkit-transform:translateY(-87px)
}
}
@-webkit-keyframes imgSmall{
0%{
width: 175px
height: 175px
padding: 23px
}
100%{
width: 60px
height: 60px
padding: 0
}
}
@-webkit-keyframes fadeIn{
0%{opacity:0-webkit-transform:scale(.3)}
100%{opacity:1-webkit-transform:scale(1)}
}
@-webkit-keyframes rotate{
0%{opacity:0-webkit-transform:rotate(0deg)}
50%{opacity:1-webkit-transform:rotate(180deg)}
100%{opacity:0-webkit-transform:rotate(360deg)}
}
</style>
<body>
<div class="welcome-main">
<div class="top-info">
<div class="wec-img"><p class="img-con"><img src="" alt=""></p></div>
</div>
</div>
<script>
$('.welcome-main').addClass('loading')
setTimeout(function(){
$('.hi.fst').removeClass('loading')
$('.welcome-main').addClass('loaded')
},700)
</script>
</body>
</html>
在 chrome 上测试 ok，但在提测给 QA 的时候发现部分机型，如华为(系统4.2)，oppo(系统5.1)的出现卡顿情况。
百思不得其解，后来参考文章深入浏览器理解 CSS animations 和 transitions 的性能问题一文，将图片缩放中动画元素改成 transform，如下
@-webkit-keyframes imgSmall{
0%{
-webkit-transform:scale(1)
}
100%{
-webkit-transform:scale(.465)
}
}
果然啊，卡顿问题解决了。
文章深入浏览器理解 CSS animations 和 transitions 的性能问题是这么解释的，现代的浏览器通常会有两个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。
一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。
相应地，合成线程负责：通过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。
假设我们要一个元素的 height 从 100 px 变成 200 px，就像这样：
div {
height: 100px
transition: height 1s linear
}
div:hover {
height: 200px
}
主线程和合成线程将按照下面的流程图执行相应的操作。注意在橘黄色方框的操作可能会比较耗时，在蓝色框中的操作是比较快速的。
而使用 transform:scale 实现
div {
transform: scale(0.5)
transition: transform 1s linear
}
div:hover {
transform: scale(1.0)
}
此时流程如下：
也就是说，使用 transform，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。
为了从数量级上去证实这个理论，我打开 chrome 的 Timeline 查看页面 FPS
其中，当用 height 做动画元素时，在切换过程的 FPS 只有 44，我们知道每秒 60 帧是最适合人眼的交互，小于 60，人眼能明显感觉到，这就是为什么卡顿的原因。
rendering 和 painting 所花的时间如下：
再来看看用 transform:scale
FPS 达到 66，且 rendering 和 painting 时间减少了 3 倍。
到此为止问题是解决了，隔了几天，看到一篇解决 Chrome 动画”卡顿”的办法，发现还能通过开启硬件加速的方式优化动画，于是又试了一遍。
webkit-transform: translate3d(0,0,0)
-moz-transform: translate3d(0,0,0)
-ms-transform: translate3d(0,0,0)
-o-transform: translate3d(0,0,0)
transform: translate3d(0,0,0)
总结解决 CSS3 动画卡顿方案
尽量使用 transform 当成动画熟悉，避免使用 height,width,margin,padding 等；
要求较高时，可以开启浏览器开启 GPU 硬件加速。
