Css3如何实现旋转移动动画特效

互联网 18-10-19

本篇文章主要给大家介绍css3动画实现旋转特效的方法。

css即层叠样式表，想必学习前端的小伙伴们已经非常熟悉了。那么大家应该都知道，一个炫酷的动画特效，能使你的网站显得更加高大上，丰富内容吸引用户。

下面我们就给大家介绍一个简单有趣的动画特效，也就是实现图片旋转效果。

<!DOCTYPE html> <html> <meta charset="utf-8"> <title>css3实现旋转移动动画特效</title> <head>     <style> .main{     width: 100px;     height: 50px;     line-height: 50px;     text-align: center;     color: #fff;     border-radius: 20px;     background: red;     position: relative;     top: 30px;     animation: asd 5s; }         @keyframes asd {             0 %{transform: rotate(0deg);}             25%{transform: rotate(60deg);left: 0px;}             50%{left:500px;}             75%{transform: rotate(-520deg);}             100%{transform: rotate(0deg);left: 0px;}         }  </style> </head> <body>  <div class="main">     动画 </div> </body> </html>

效果如下图：