标签：指定 转换 translate 完全 cti 通过 circle pause rate
该选择器代表的意思是输入框被选中的状态
:focus输入框获得焦点的状态即输入框被选中的状态
}
标签1+标签2：相邻兄弟选择器，选择标签1下面的和标签1相邻的标签。如果该标签是标签2此时应用样式。如果不是则不使用
cover:图片进行等比例缩放直到图片完全覆盖整个标签
contain:图片进行等比例缩放，直到图片某一方向盛满整个标签
border-box:从边框边界处裁剪（默认值）
padding-box:从内边距位置处裁剪
content-box:从内容层位置处裁剪
-webkit-mask-image:url();设置蒙版的图片
-webkit-mask-repeat:no-repeat;设置蒙版是否重复
-webkit-mask-size:100% 100%;设置蒙版的尺寸
-webkit-mask-position:-100px -100px;设置蒙版的显示位置
14. background:linear-gradient(to bottom,red 80%, yellow);线性渐变
15. background:radial-gradient(circle,red, yellow，blue);径向渐变
16. –webkit-filter:grayscale(50%);将图片转换成灰度图
Sepia（）：将图片转换成褐色图
Saturate():转换图片的饱和度
Opacity():转换图片的透明度
Blur(px):调整图片的高斯模糊度
17. transition:all 2s 1s linear;此种写法可以保证所有css样式的改变都会产生动画，并且动画是同时执行的，参数1指代样式，参数2指代动画运行的时间；参数3代表动画延迟执行的时间；参数4代表动画运行的速度（linear：匀速；ease-out:速度逐渐变慢；ease-in-out:速度先快慢；ease-in：速度逐渐变快）
18．Translate(200px,100px)平移变换，参数分别代表水平和竖直方向的平移，如果为百分比此处平移量相对于标签自身的宽度和高度进行计算
19. tranform-origin:center center;修改变换的基准点
20. transform:skew(90deg);变换分为平移变换（translate）,旋转变换（rotate）,缩放变换（scale）,倾斜变换（skew）,四种变化可以随机组合
21. 开启3D渲染模式。该方式只会让当前标签中所有子级元素获得3D渲染
Transform-style:preserve-3d;
22. 设置人眼和3D物体的位置：perspective:1000px;
23. 设置人眼观察3D物体的位置：perspective-origin:center bottom;
24. animation:move 2s 5s linear alternate infinite;绑定动画;
参数1需要绑定的关键帧动画的名字
参数2：一次动画需要运行的时间
参数3：动画延迟执行的时间
参数4：动画播放的速度
参数5：动画播放的方向，reverse跟动画默认播放的方向相反
Alternate-reverse；动画奇数次反向播放，偶数次按照默认方向播放
参数6：动画播放结束后标签所处的状态，forwards：动画播放结束后标签处于动画结束的状态。Backwards：设置标签动画结束时处于动画开始的状态
参数7：动画播放的次数。Infinite代表无数次，默认1次
25. animation-play-state:paused;控制动画播放状态；running：开始播放；paused:暂停播放
26. 对于帧动画来讲：本质上就是将整个动画过程通过百分比的形式划分成若干个部分，在规定的时间内按照顺序分别执行不同的片段形成的动画
使用过程：
(1) 使用@keyframes 定义指定名字的关键帧动画，在该动画中分别设置标签需要执行动画的不同的css样式
(2) 在需要执行该动画的标签中使用animation实现动画的绑定操作
标签：指定 转换 translate 完全 cti 通过 circle pause rate
原文地址：https://www.cnblogs.com/rose1jj/p/9500962.html
