<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>



#img1{

border-radius: 100%;

width: 200px;

height: 200px;

}

#img1:hover{

animation: myimg 5s linear infinite ;

}

@keyframes myimg {

from{transform: rotate(0deg); }

/*from to指定范围*/

to{transform: rotate(360deg);}

}

.div1,.div2{

width: 100px;

height: 100px;

background-color: cornsilk;

margin: 100px;

}

@keyframes myname {

25%{width: 150px;height: 150px;}

50%{width: 200px;height: 200px;}

75%{width: 250px;height: 250px;}

100%{width: 400px;height: 400px;}

}


@keyframes myname2 {

from{width: 100px;height: 100px;}

to{width: 500px;height: 600px;background-color: blueviolet}

}

.div1:hover{

animation: myname 2s;

}

.div2:hover{

animation: myname2 2s;

/*使用指定的动画，持续时间*/

}

</style>

</head>

<body>

<div class="div1">


</div>

<div class="div2">


</div>

<img src="res/p_w_picpaths/yuner.png" id="img1">

animation: myimg 3s linear infinite ;infinite可以一直保持旋转


</body>

</html>