一、渐变
1、线性渐变
语法:background-image:linear-gradient
方向:上、下、左、右、角度
默认的是top、to bottom、180deg
如果要添加方向,则必须使用浏览器的内核识别标识
-webkit- : safari & chrome
-moz- : firefox
-ms- : IE
-o- : opera
2、径向渐变
语法:background-image:radial-gradient
形状:circle / ellipse
终点:closest-side / closest-corner / farthest-side / farthest-corner
二、过渡
transition 在不适用动画的情况下变换状态
transition:all 1s 0.1s linear 顺序:属性名 时间 延迟时间 速度曲线
transition-property 设置过渡的属性
transition-duration 定义过渡时间
transition-delay 定义延时执行时间
transition-timing-function 过渡效果的时间曲线
(linear 匀速 ease 慢、快、慢 ease-in 慢、快 ease-out 快、慢 ease-in-out 慢、快、慢)
三、倒影
box-reflect
语法:box-reflect:方向 偏移量 蒙版或渐变
值:none 默认值 below above left right
四、变形
transform
平移 translate 旋转 rotate 伸缩 scale 拉伸 skew
3d效果 transform-style:preserved-3d
五、动画
关键帧 keyframes
动画
animation-name 动画属性名
animation-duration 动画持续时间
animation-delay 动画延续时间
animation-timing-function 动画速度曲线
animation-iteration-count 定义循环次数 ( infinite无限循环)
animation-play-state 动画状态 (值:paused running)
animation-fill-mode forwards保留最后一帧动画
六、第三方动画库
eg animation.css
使用第三方动画库可以帮助我们快速实现一些复杂动画
案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gradient</title>
<style>
body{
background-color: #666;
}
p{
width: 400px;
height: 100px;
font-size: 60px;
line-height: 100px;
text-align: center;
background-color: gold;
color: transparent;
background-image: -webkit-linear-gradient(135deg, transparent 15%, #fff 17%, transparent 19%);
/* 过渡 */
transition: 3s;
/* 背景剪裁 */
-webkit-background-clip: text;
}
p:hover{
background-position: 400px 0;
}
.yy{
width: 384px;
height: 216px;
background-image: url(../img/rjl.jpg);
background-size: cover;
mask-image: linear-gradient(left, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
-webkit-mask-image: -webkit-linear-gradient(left, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
transition: 3s;
}
.yy:hover{
background-position: 384px 0;
}
.bg{
width: 384px;
height: 216px;