注意 @keyframes to/from 的学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <style>
/* 顺时针自转 */
@keyframes spin {
to {
transform: rotate(1turn);
}
} /* 逆时针自转 */
@keyframes spin-reverse {
from {
transform: rotate(1turn);
}
} /* 这是一坨自暴自弃的样式 */
.basic{
border:3px solid orange;
height: 150px;
width:150px;
border-radius:50%;
margin:50px;
} /*
顺时针自转，同时该元素下所有的子元素也会一起旋转起来
*/
.avatar{ /*
linear : 从头到尾速度是相同的;
infinite：无限轮播
*/
animation: spin 10s infinite linear; } /*
逆时针旋转“自转”，与“公转”导致的旋转相抵消。形成一种不动的错觉
*/
.avatar > img { animation:spin-reverse 10s infinite linear;
} </style> <div class="basic avatar">
<img src="github.png" alt="">
</div> </body>
</html>