一、过渡模块
1、a标签的伪类选择器
(1)作用:修改a标签不同状态的样式
(2)a 标签的四种状态
- 访问前(:link)
- 访问后(:visited)
- 长按时(:active)
- 悬浮时(:hover)
(3)注意点
- 伪类选择器可以单独出现,也可以一起出现
- 一起出现的顺序为:link visited hover active
- 访问前和访问后状态的颜色相同的话可以简写:a{color:red;}
(4)练习总结
- 伪类选择器放在标签选择器的后面
- 盒子相关属性放在标签里
- 文字背景相关属性放在伪类选择器里
2、过渡模块
(1)基本使用
- 使用的三要素:属性变化;哪个属性需要过渡;效果的时长;
- hover伪类所有的标签都可以用;
- 注意:多属性的过渡效果的写法如下;
(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;
- 动画内容:
- 动画时长: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)格式:分开书写也可以