- 线性渐变：linear-gradient
- 圆形渐变：radial-gradient
- 过渡过画：transition
- 自定义动画：animation
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS过渡、渐变、自定义动画</title>
<meta name="阿乞" content="150105.net" />
<style>
#div1{
width: 300px;height: 50px;
/*线性渐变：linear-gradient
background或background-image：指明方向用to right、to left、to top、to bottom，再指明二个颜色值*/
/*background-image: linear-gradient(to right,red, #fff);*/
background:linear-gradient(to left,red,#fff);
}
#div2{
width: 200px;
height: 200px;
/*圆形渐变：radial-gradient
二个数字不等的话显示椭圆
/*background-image: linear-gradient(to right,red, #fff);*/
background: radial-gradient(100px 50px, red,blue,yellow);
}
#div3{
width: 200px;
height: 200px;
background: green;
/*过渡过画：transition，一般写二个参数，如：transition: all 2s
多用于hover伪对象,但transition要写在对象里，不是Hover里。hover里有多种效果的时候，就用all
参数-1：transition-property 默认值是：all，可指定可过渡的属性，如color、background等
参数-2：transition-duration 默认值是：0，指定对象过渡的持续时间
参数-3：transition-timing-function 默认值是：ease，指定过渡效果，如linear 、ease-in
参数-4：transition-delay 默认值是：0 ， 指定对象过渡的延迟时间，相当等待多长时间后再执行过渡，一般不要这个*/
transition: all 0.3s ease-in 1s;
}
#div3:hover{background: red;border: 10px solid blue;opacity: 0.5;transform: translate(500px, 20px);}
#div4 {
width: 200px;
height: 200px;
border-radius: 100%;
background: radial-gradient(30px 90px, #333,#fff,#666);
/*自定义动画：animation，一般写4个参数,如：animation:aname 0.05s linear infinite
使用这个要配合@keyframes 使用
多用于效果比较复杂的过渡，含有多种效果的时候，以下参数位置可以打乱写
参数-1：animation-name 定义一个或多个动画名称(identifier标识)，如果提供多个属性值，以逗号进行分隔。
参数-2：animation-duration 指定对象动画的持续时间
参数-3：animation-timing-function 默认值：ease
参数-4：animation-delay 指定对象动画延迟的时间 ，这个一般不写
参数-5：animation-iteration-count 值 infinite： 无限循环 ，具体数字指定对象动画的具体循环次数 。默认值：1
参数-6：animation-direction 默认值：normal-正常方向，reverse-反向，alternate-正常再反向，alternate-reverse-先反再正
参数-7：animation-play-state 默认值：running，其它值：paused： 暂停，这个一般不写
参数-8：animation-fill-mode 默认值：none，forwards-结束时的状态，backwards-开始时的状态 ，both-结束或开始的状态，用默认值在作圆运动时能表现连续不间断 */
animation:aname 0.05s linear 1s infinite normal running none;
}
@keyframes aname{
/*@keyframes：自定一个动画，可以用from to来定义，也可以用百分比来定义动画
使用from to 的写法
from{transform: translate(20px,30px);opacity: 1}
to{transform: translate(20px, 60px);opacity: 0.5;}
*/
/*使用百分比的写法
0%{transform: translate(0 10px);opacity: 0}
50%{transform: translate(300px, 70px);opacity: 1}
75%{transform: translate(320px, 80px);opacity: 1}
100%{transform: translate(500px, 600px);opacity: 0;}
*/
from{transform: rotate(0deg);}
to{transform: rotate(359deg);}
}
#div4:hover{animation:paused;}
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
必须 注册 为本站用户， 登录 后才可以发表评论！