今日学习内容

• 过渡属性transition

作用：可以看到一个元素从一个状态到另一个状态的变化过程

值：那个属性存在过渡效果  默认为all（所有）

过渡所需要的时间   1s（秒 s  毫秒 ms）

过渡延迟执行时间  1s（秒 s  毫秒 ms）

运动形式（运动曲线）：

可以把每个过渡属性的过渡时间单独设置transition：属性  时间，属性 时间

Transition: 过渡属性  过渡时间  过渡延迟时间  运动形式

transition-property: all;  过渡属性

transition-duration: 1s; 过渡执行时间

transition-delay: 1s;  过渡延迟执行时间

transition-timing-function: linear;  运动曲线

注意：过渡属性不支持display:none和display:block

如何实现现实和隐藏：宽高或者透明

【浏览器兼容前缀】

-webkit-transition   谷歌 苹果

-o-transition  欧朋

-ms-transition  ie

-moz-transition  火狐

【使用外部样式表时浏览器会自动执行一次过渡】

在页面的最后添加<script>;</script>

• 2d属性 transform

1. 缩放函数 scale()

从中心向两端的放大效果  值比1大就是放大，比1小就是缩小，内容会随着放大或缩小  放大和缩小都是宽度和高度的变化

一个值代表 宽度和高度同时缩放的倍数

两个值中间用逗号隔开  第一个代表宽度  第二个代表高度

可以单独设置宽度 scalex（）  可以单独设置宽度scaley（）

可以设置负值，先翻转再变大或缩小

1. 旋转函数rotate(多少度deg)

正值顺时针，负值逆时针

一个值代表当前这个平面旋转的角度

可以单独设置x方向  rotatex（）代表上下方向

可以单独设置y方向 rotatey（）代表左右方向

从中心的旋转

1. 倾斜skew(给定倾斜的角度)

里边内容会跟随倾斜

设置一个值代表x轴方向的倾斜度

两个值，第一个代表x  第二个代表y

可以单独设置skewx()左右   skewy()上下  skew(x,y)

1. 偏移函数translate（）

在原来位置上的偏移

写一个值代表水平方向  translatex（）

两个值 第一个代表水平  第二个代表垂直  translate（x，y）

Translatey代表垂直方向

可以设置负值 如果设置百分比是指这个元素宽高的百分比

1. 阻止冒泡鼠标屏蔽pointer-events：none

阻止谁写给谁

1. 旋转或缩放的基点transform-origin

两个值 值1代表水平 left  center  right

   值1 代表垂直 top  center  bottom

可以设置具体的数值

1. 如果一个元素同时设置多个功能函数需要注意顺序问题

值相同顺序不同最终的显示效果是不同的

多个功能函数之间用空格隔开

• 背景颜色的渐变

线性渐变的语法：

background: linear-gradient(to top,red,blue,yellow);

background: linear-gradient(45deg,#f00,#ff0,#00f);

线性渐变的重复渐变

background: repeating-linear-gradient(45deg,#f00 0%,#f00 10%,#00f 10%,#00f 20%);

径向渐变

background: -webkit-radial-gradient(50% 50%,#f00,#ff0,#00f);

径向渐变重复渐变

background: repeating-radial-gradient(red,red 10px,white 10px,white 20px);