（1）动画关键帧
例如：@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
1.鼠标移入图片时，图片向左边位移 12px,
使用过渡设置动画时间持续 1s，动画的方式为 ease-out。
例如：：hover{
transition:dd(随便取名）1s ease-out 0s
transform:translate(向左.右轴的方向移动多少px方式)
}
@keyframes dd{
0%{
width:10px
}
100%{
width:30px
}
}
（2） 多媒体
/* 实现div在屏幕不同大小的情况下，显示不同的颜色 */
/* 媒体查询 */
/* max-width最大宽度 */
/* min-width最小宽度 */
1.500-700包括500和700像素的时候
@media screen and(max-width:700px)and(min-width:500px){
div{
background-color: chartreuse;
}
}
2. min-width：800px 屏幕大小 大于等于800px的时候显示如下样式
@media screen and(min-width:800px){
div{
background-color: brown;
}
}
3. max-width:700px 屏幕大小 小于等于700px的时候显示
@media screen and(max-width:700px){
div{
background-color: chartreuse;
}
}
