<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*定义动画*/ @keyframes zd{ /*关键帧 自定义的动画名称*/ /*从*/ 0%{ transform: rotate(0deg); } 10%{ transform: rotate(70deg); } /*到*/ 100%{ transform: rotate(360deg); } } .a{ height: 200px; width: 200px; border-style: solid; border-width: 20px; border-color: red yellow green blue; border-radius: 50%; /*transition: 2s;*/ } .a:hover{ /*transform: rotate(360deg);*/ animation: zd 1s infinite linear; /*动画 动画名称 动画执行一次所需时间 执行次数 匀速*/ } </style> </head> <body> <div class="a"></div> </body> </html>
源码禁止盗用!转载请注明出处!!!
原文：http://www.cnblogs.com/lhl66/p/7528368.html