学习02-css（动画的制作，浏览器私有前缀，meta视口标签，背景缩放）

css动画

1.先定义动画，用keyframes定义动画（类似定义类选择器）

 @keyframes 动画名称 {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }

2.再使用调用动画

animation-name: 动画名称;	调用动画
animation-duration: 持续时间;	持续时间
animation-timng-function	规定动画的速度曲线，默认ease
animation-delay	规定动画何时开始，默认0
animation-iteration-count	规定动画被播放的次数默认为1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆向播放
animation-play-state	规定动画是否正在运行或者暂停，默认是“running”，还有“paused”
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

3.动画简写

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；
animation：myfirst 5s linear 2s infinite alternate；

浏览器私有前缀

-moz-	代表firefox浏览器
-ms-	代表ie浏览器
-webkit-	代表Safari，chrome
-o-	代表opera

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ">

width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimun-scale	最小缩放比，大于 0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

背景缩放

background-size：数值;

长度	只写一个的话会等比例缩放
百分比	相对父盒子来说比例
cover	把背景图片扩展至足够大，使其背景图像完全覆盖背景区域
contain	把背景图像扩展至最大尺寸，使其宽度和高度完全适应内容区域

 

 

来源：oschina

链接：https://my.oschina.net/u/4454049/blog/3176185