console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
*{
margin: 0;
padding: 0
}
.father{
width: 50px;
height: 50px;
margin: 100px auto;
border: 1px solid #ccc;
animation: animate 2s linear infinite
}
.son{
width: 50px;
height: 50px;
border: 1px solid red;
transform: rotate(45deg)
}
@keyframes animate{
0%{
transform: rotate(0deg)
}
50%{
transform: rotate(180deg)
}
75%{
transform: rotate(270deg)
}
100%{
transform: rotate(360deg)
}
}
.father:hover{
animation-play-state: paused
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>