transition 和transition duration共同使用实现过渡效果
<style>
div{
width:300 px;
height:300 px;
background-color:red;
//注意兼容性
transition-property:all;
transition-timing-function:cubic-bezier(0,0,1,1);/这个是干嘛的？/
transition-duration: 1 s;
}
div:hover{
width: 500 px;
background-color:black;
}
</style>

方块变成圆滚动效果
<style>
div{
width:300 px;
height:300 px;
background-color:red;
transition:all 3s linear;
}
div:hover{
transition:all 10s;
}
</style>
@keyframes animation动画 使用百分比来规定转换时间
<style>
@keyframe ACT{
0%{
background-color:red;
left: 100 px;
top: 20 px;
}
20%{
background-color:red;
border-radius:20%;
left: 150px;
top: 70px;
}
40%{
background-color:red;
border-radius:20%;
left: 200px;
top:120px;
}
60%{
background-color:gold;
border-radius:50%;
left: 250px;
top: 270 px;
}
80%{
background-color:gold;
border-radius:50%;
left: 300px;
top:320 px;
}
}
</style>

线性渐变

查一下原理
to top right 一直渲染到右下角 这个意思

镜像渐变

<style>
div{
width: 200px;
height: 200px;
border:1px solid red;
/参数全部为颜色/
background-color:linear-gradient()
}
</style>
<div></div>