css3 动画 实例 媒体查询
1.定义动画效果 @keyframes
参考资料:http://www.w3school.com.cn/css3/css3_animation.asp
推荐是 10% 到100%状态兼容最好;@keyframes 后面跟动画名称
@keyframes scrollrightToLeft{
10% {}
50%{}
100%{}
}
@keyframes scrollrightToLeft{
from {}
top {}
}
2.绑定执行动画 animation:动画名 动画执行时间
参考资料:http://www.w3school.com.cn/cssref/pr_animation.asp
div.a1{
animation:scrollrightToLeft 2s;
}
考虑到兼容性
-moz-animation:scrollrightToLeft 2s;
-o-animation:scrollrightToLeft 2s;
-webkit-animation:scrollrightToLeft 2s;
3.动画常用效果
opacity 透明度 opacity:0.5
移动
4.媒体查询@media screen and(min-width:X){}
实例:
@media screen and (min-width : 414px) and (max-width : 980px){
html{
width: 1200px;
}
}
min-width:大于等于 X
max-widht:小于等于 X
注:X为手机屏幕宽度
rem适配 还是没有完全

浙公网安备 33010602011771号