animation动画
（1）@keyframes 定义关键帧动画 （2）animation-name 动画名称 （3）animation-duration 动画时间 （4）animation-timing-function 动画曲线linear（匀速）| ease（缓冲）| step（步数） （5）animation-delay 动画延迟 （6）animation-iteration-count 动画播放次数n | infinite （7）animation-direction 动画结束后是否反向还原 normal | alternate （8）animation-play-state 动画状态 paused（停止）| running（运动） （9）animation-fill-mode 动画前后的状态 none（缺省）| forward(结束时停留在最后一帧) | backwards（开始时停留在定义的开始帧）| both（前后都应用） （10）animation：name duration timing-function delay iteration-count direction；同时设置多个属性
例子一：
<head> <meta charset="utf-8"> <title>animation动画</title> <style type="text/css">
@keyframes shrink{ from{
width: 200px;
}
to{
width: 600px;
}
}
.box{
width: 200px;
height: 30px;
background-color: yellow;
animation: shrink 1s ease 0.2s infinite normal;
}
.box:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
例子二：loading
<head> <meta charset="utf-8"> <title>loading</title> <style type="text/css">
@keyframes loading{
from{
transform: scale(1,1);
}
to{
transform: scale(1,0.5);
}
}
.box{
width: 300px;
height: 200px;
border: 1px solid #000;
}
.box div{
width: 30px;
height: 100px;
background-color: gold;
margin: 15px;
float: left;
border-radius: 15px;
animation: loading 500ms ease infinite alternate;
}
.box div:nth-child(1){ /*CSS3新增选择器*/
background-color: #3DE94C;
}
.box div:nth-child(2){
background-color: #3DB0AB;
animation-delay: 100ms;
}
.box div:nth-child(3){
background-color: #969EF3;
animation-delay: 200ms;
}
.box div:nth-child(4){
background-color: #F488ED;
animation-delay: 300ms;
}
.box div:nth-child(5){
background-color: #ED4F52;
animation-delay: 400ms;
}
</style>
</head>
<body>
<div class="box">
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<p>loading.........</p>
</div>
</body>
2.CSS3新增选择器
E:nth-child(n)：匹配元素类型为E，且是父元素的第n个。
3.CSS3圆角、rgba
(1)圆角
设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px;
同时设置四个角： border-radius：20px 10px 30px 50px;
设置四个圆角相同： border-radius：50%;
4.rgba(新的颜色值表示法)
（1）盒子透明表示法：
.box{ width: 300px; height: 300px; background-color: #000000; margin: 50px auto;
/*透明完整写法,整个盒子透明*/
opacity: 0.3;
filter: alpha(opacity=30);
}
.box01{
width: 300px;
height: 300px;
/*第二种写法，仅背景透明*/
background-color: rgba(0,0,0,0.5);
margin: 50px auto;
/*透明完整写法*/
/*opacity: 0.3;
filter: alpha(opacity=30);*/
}
