【CSS3】特效--- 渐变、倒影、过渡、变形

css特效

一、渐变

1、线性渐变

• 语法

background-image：linear-gradient（方向（deg），颜色 渐变点的百分比）

• 方向
  ①上、下、左、右、角度
  ② 默认的是top、to bottom、180deg

• 若添加方向，则必须使用浏览器的内核识别标识
  ① -webkit- —— safari&chrome
  ② -moz- —— firefox
  ③ -ms-—— IE
  ④ -o-—— opera

2、径向渐变

• 语法

radial-gradient（中心点，形状，颜色，渐变点的百分点）

• 形状
  ① cricle
  ② ellipse

• 终点
  ① closest-side
  ② cloest-corner
  ③ farthest-side
  ④ farthest-corner

3、重复渐变

repeating-（径向、线性）

4、颜色

• 可用多个颜色
• 还可以使用透明度

5、练习

• 彩虹🌈

div {
   
       width: 500px;
       height: 300px;
       background-image: -webkit-radial-gradient(center bottom, transparent 30%, purple, deepskyblue, cyan, greenyellow, gold, orange, tomato, transparent 50%);
        }

• 效果图
  

二、过渡

1、transition

• 在不适用动画的情况下变换状态
• 简写状态

transition：all 1s 0.1s linear
顺序：属性名 时间 延迟时间 速度曲线

2、transition-porperty

• 设置过渡的属性
• 值——全部css属性

3、transition-duration

• 定义过渡时间

4、transition-delay

• 定义延时执行时间

5、transition-timing-function