呼啦圈(keyframes和transform结合)
Posted 鱼樱、、
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了呼啦圈(keyframes和transform结合)相关的知识,希望对你有一定的参考价值。
<!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>
源码禁止盗用!转载请注明出处!!!
以上是关于呼啦圈(keyframes和transform结合)的主要内容,如果未能解决你的问题,请参考以下文章
搞清animation/transtion/transform/translate
搞清animation/transtion/transform/translate