<动画>----> 使用@keyframes+动画名字，动画的改变可以从from到to，或者是从0%到100%变化，变化不知可以变化背景颜色，还可以变化包括
长高之类的CSS属性
在对应的盒子中添加animation属性，animation:name(设置动画的名称) duration(设置动画的持续时间) timing-function(设置动画的速率)
delay(设置动画的开始时间) iteration-count(设置动画的循环次数) direction(设置动画播放的方向)
div{
width: 100px;
height: 100px;
background-color: green;
animation: myAnim 3s linear 0s infinite;
}
div:hover{
animation-play-state: paused;(设置动画的播放状态：running代表播放，paused表示停止播放)--->鼠标放置在该盒子上
}
@keyframes myAnim{
from{
background-color: aquamarine;
}
to{
background-color: antiquewhite;
}
}
@keyframes AAA{
0%{
background-color: red;
}
50%{
background-color: azure;
}
100%{
background-color: blue;
}
}
<呼吸效果>
<style>
.box1{
width: 500px;
height: 400px;
margin: 40px auto;
background-color: rgb(205, 218, 255);
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe{
0%{
opacity: 0.2;
box-shadow:0 1px 2px rgba(255, 255, 255, 0.1);
}
50%{
opacity: 0.5;
box-shadow:0 1px 2px rgba(18, 190, 84, 0.76);
}
100%{
opacity: 1;
box-shadow:0 1px 30px rgba(59, 255, 255, 1);
}
}
</style>
