注意 @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>
