利用animation的动画过渡效果制作一个图片旋转的动画。
随便取了一个图片素材
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转</title> <link rel="stylesheet" href="../CSS/xuanzhuan.css"> </head> <body> <div></div> </body> </html>
CSS代码：
body { margin: 0; padding: 0; } div { width: 50px; height: 25px; margin: 100px auto; padding: 150px; background: url("../IMG/001.jpg") no-repeat; position: relative; animation:myfirst 1s infinite ; } @keyframes myfirst { 100%{width: 300px;height: 150px;transform: rotate(360deg);} }
动画效果：
