form伪类

1. input[type=”text”]:focus{

该选择器代表的意思是输入框被选中的状态

:focus输入框获得焦点的状态即输入框被选中的状态

}

1. 去除标签的外轮廓：outline:none;
2. 把输入框设置成禁用状态：input[type=”text”]:disabled{}
3. 属性选择器：根据标签指定的属性获取对应的标签
4. 结构选择器：

标签1+标签2：相邻兄弟选择器，选择标签1下面的和标签1相邻的标签。如果该标签是标签2此时应用样式。如果不是则不使用

1. div:nth-child(2n-1){}获取指定位置的标签，如果该标签是我们需要查找的div，此时应用样式，如果不是则不应用；注意，参数可以是具体的数字，也可以是由n组成的表达式，n默认从0开始，每次增加1，直至将所有满足的且位置满足的标签应用样式
2. :root{}选择根标签
3. :target{}选择用户点击的锚点
4. Background:url();设置标签的背景颜色或背景图片，该css样式是一种复合写法，分别设置标签背景的颜色，图片和重复方式
5. Background-size:设置图片的背景尺寸，可以是指定的像素值，也可以是百分比，或者是系统内置的值

cover:图片进行等比例缩放直到图片完全覆盖整个标签

contain:图片进行等比例缩放，直到图片某一方向盛满整个标签

1. background-position设置背景图片的位置，该样式基于定位实现，第一个值为水平方向位置，第二个值为竖直方向的位置。注意，如果两个值为百分比，此时计算机计算时按照图片宽度和标签宽度的差值进行计算
2. background-clip:content-box;

border-box:从边框边界处裁剪（默认值）

padding-box:从内边距位置处裁剪

content-box:从内容层位置处裁剪

1. 蒙版：用来通过一些特定的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实现动画的绑定操作