1.动画animation
1.1 第一种方式
//CSS
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
1.2 第二种方式
//CSS
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s;
}
div{
animation:myfirst 2s infinite; //无限循环
}
2 自己代码如下
//HTML
<div></div>
//CSS
<style>
div{
width: 200px;
height: 300px;
background-color: pink;
border-radius: 150px;
margin: 100px;
}
div:hover{
animation: yxh 3s infinite; //无限循环 infinite
}
@keyframes yxh {
// 第一种方式
/*0%{background-color: red;width: 400px;height: 400px}*/
/*25%{background-color: yellow}*/
/*50%{background-color: blue}*/
/*100%{background-color: turquoise}*/
// 第二种方式
from{
background-color: red;
transform:rotate(360deg)
}
to{
background-color: darkblue;
height: 500px;
width: 900px;
border-radius: 450px;
}
}
</style>
