form伪类
- input[type=”text”]:focus{
该选择器代表的意思是输入框被选中的状态
:focus输入框获得焦点的状态即输入框被选中的状态
}
- 去除标签的外轮廓：outline:none;
- 把输入框设置成禁用状态：input[type=”text”]:disabled{}
- 属性选择器：根据标签指定的属性获取对应的标签
- 结构选择器：
标签1+标签2：相邻兄弟选择器，选择标签1下面的和标签1相邻的标签。如果该标签是标签2此时应用样式。如果不是则不使用
- div:nth-child(2n-1){}获取指定位置的标签，如果该标签是我们需要查找的div，此时应用样式，如果不是则不应用；注意，参数可以是具体的数字，也可以是由n组成的表达式，n默认从0开始，每次增加1，直至将所有满足的且位置满足的标签应用样式
- :root{}选择根标签
- :target{}选择用户点击的锚点
- Background:url();设置标签的背景颜色或背景图片，该css样式是一种复合写法，分别设置标签背景的颜色，图片和重复方式
- Background-size:设置图片的背景尺寸，可以是指定的像素值，也可以是百分比，或者是系统内置的值
cover:图片进行等比例缩放直到图片完全覆盖整个标签
contain:图片进行等比例缩放，直到图片某一方向盛满整个标签
- background-position设置背景图片的位置，该样式基于定位实现，第一个值为水平方向位置，第二个值为竖直方向的位置。注意，如果两个值为百分比，此时计算机计算时按照图片宽度和标签宽度的差值进行计算
- background-clip:content-box;
border-box:从边框边界处裁剪（默认值）
padding-box:从内边距位置处裁剪
content-box:从内容层位置处裁剪
- 蒙版：用来通过一些特定的png图片设置一些特定的外观样式，注意png素材中之前透明的部分在蒙版中是不透明的，不透明的是透明的
-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实现动画的绑定操作
