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動畫 使用百分比來規(guī)定轉換時間
<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>
