设置样式过渡渐变：transition
transitions 的属性由四个属性构成：
1. transitions-property -> 规定过渡的css属性名称
property 值有三：
none 没有属性会获得过渡效果
all 默认值，所有属性将会获得过渡效果
property 定义应用过渡效果的css属性名称列表-->
2. transition-duration ：定义过渡效果时长，默认0
3. ransition-timing-funciton 规定过渡效果的时间曲线
取值有6：
linear 线性 匀速效果
ease 默认值，由慢到快，再慢速结束
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束
cubie-bezier(n,n,n,n) 自定义n∈[0，1]-->
4.transition-delay 规定效果开始之前的等待时间，默认0-->
Attention！： transitions 放在过渡前的CSS样式里面，那么效果将会怎么出现就怎么消失 放在过渡后的样式中，效果将会在出现后就直接消失，不会有过渡还原效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡transitions</title>
<style>
div{
width: 100px;
height:100px;
margin: 0 auto;
background-color: limegreen;
transition:all 5s ease;
}
div:hover{
width:100px;
height:100px;
margin: 0 auto;
background-color: yellow;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果图：
鼠标还未移至绿色矩形上：
鼠标移至绿色矩形：矩形过渡渐变至黄色
鼠标离开矩形区域：黄色渐渐过渡回绿色
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
