一、过渡模块

1、a标签的伪类选择器

（1）作用：修改a标签不同状态的样式

（2）a 标签的四种状态

访问前（：link）
访问后（：visited）
长按时（：active）
悬浮时（：hover）

（3）注意点

伪类选择器可以单独出现，也可以一起出现
一起出现的顺序为：link visited hover active
访问前和访问后状态的颜色相同的话可以简写：a｛color：red；｝

（4）练习总结

伪类选择器放在标签选择器的后面
盒子相关属性放在标签里
文字背景相关属性放在伪类选择器里

2、过渡模块

（1）基本使用

使用的三要素：属性变化；哪个属性需要过渡；效果的时长；
hover伪类所有的标签都可以用；
注意：多属性的过渡效果的写法如下；

div{
    transition-property:width,height;
    transition-duration:5s,5s;
}

（2）其他属性

transition-delay：设置动画延迟的；
transition-timing-function：设置动画的速度的（linear、ease-in-out）

（3）连写

格式：transition：属性时长速度延迟；
后面两个值可以省略；
多属性依旧使用逗号隔开即可；
多属性的过渡都一样的话可以这样写：transition：all 5s；

（4）弹性效果和手风琴效果的练习

二、2d转换模块

1、基本入门

（1）平移：transform：translate（x，y）；

（2）旋转：transform：rotate（45deg）；

（3）缩放：transform：scale（x，y）；以1为界，大于为放大，水平垂直方向的缩放一样时可以只写一个值；

（4）综合：transform：rotate（45deg） translate（x，y） scale（x，y）；

中间以空格隔开；
旋转的同时坐标系也跟着旋转，会影响后面的平移；

2、形变中心点

（1）默认就是元素的中心点，可以通过设置来改变；

（2）transform-origin三种取值：像素、百分比、关键字

（3）transform-origin：50% 50%；

3、旋转轴向

（1）rotateX（）；rotateY（）；rotateZ（）；

（2）默认绕 Z 轴转；

4、透视属性

（1）就是近大远小的视觉效果；

（2）perspective：500px；后面的属性值的含义是从多远的距离看，越近效果越明显；

5、阴影

（1）盒子阴影：box-shadow：水平偏移垂直偏移模糊度阴影扩展颜色

简写只要前面的3个属性即可；
阴影分内外阴影，默认外阴影，默认颜色和盒子的内容颜色一样；

（2）文字阴影：text-shadow：水平偏移垂直偏移模糊度颜色

颜色的默认和盒子的一样；

（3）翻转菜单的练习

三、动画模块

1、基本使用

（1）动画与过渡的异同：

动画无需人为触发，而过渡需要；
二者都包含三要素；

（2）动画的三要素：

动画名称：animation-name：fff；
动画内容：

@keyframes fff｛
    from{
        ...
    }
    to{
        ...
    }
｝

/*创建动画的第二种形式*/
@keyframes fff｛
    0%{
        ...
    }
    50%{
        ...
    }
    100%{
        ...
    }
｝

动画时长：animation-duration；

2、其他属性

（1）animation-delay：动画延迟；

（2）animation-timing-function：动画的速度；

（3）animation-iteration-count：动画的循环次数；

（4）animation-direction：是否来回运动；

（5）animation-play-state：动画暂停或播放状态；

（6）animation-fill-mode：规定动画开始或者结束时的状态（none、backwards、forwards、both）；

3、连写和应用

（1）连写

animation：名称时长速度延迟次数往返
简写保证三要素即可

（2）应用

云层效果
无限滚动

四、3d转换模块

1、概述

要想呈现3d效果给父元素加 transform-style：preserve-3d；

2、正方体

ul li 布局；每个面进行平移和旋转的变化，注意旋转的角度；
为保证前后上下四个面的内容正确显示，先旋转再平移，旋转的角度分别为 90、180、270、0
左右的两个面和内容无关，随意；

3、长方体

在正方体的基础上前后上下四个面水平方向进行缩放；左右两个面根据缩放的情况增加平移的距离；
父元素被缩放了，子元素也会跟着缩放；

4、3d播放器

背景图片随浏览器窗口的变化自动调整；
3d的旋转相册；
桃心动画；

五、背景相关

1、背景尺寸相关

（1）属性 background-size

（2）属性值：

具体像素；
百分比；
宽或高等比拉伸（只需把宽或高设置成为 auto 即可）；
cover：等比拉伸知道背景填满元素；
contain：等比拉伸直到宽或者高达到元素额界限；

2、背景图片定位区域属性

（1）background-origin：设置背景图片从盒子模型的哪个部分开始填充；

（2）属性值：padding-box（默认）；border-box；content-box；

3、背景绘制区域属性

（1）background-clip：属性值和 origin 的属性值是一样的；默认是border；

4、多重背景图片的设置

（1）说明：就是给一个元素设置多张的背景图片，用背景定位的属性来布局；

（2）格式：分开书写也可以

div{
    background:url("") no-repeat top left,url("") no-repeat top right;
}

前端学习（二）css（3）