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

本篇文章主要给大家介绍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>

　　

css3中相关重要属性介绍：

transform ：

transform属性表示向元素应用 2D 或 3D 转换，可以对元素进行旋转、缩放、移动或倾斜。

@keyframes：

通过 @keyframes 规则，您可以创建动画。也就是说这里的@keyframes只是用于定义动画，并没有实际含义。

而css动画的实现原理，也就是从一个css样式逐渐变换为另一个css样式。

其中以百分比（或者"from" 和 "to"）来规定改变发生的时间。（0% 是动画的开始时间，100% 动画的结束时间。）

只要大家掌握了css动画原理，那么想要通过纯css做大多数酷炫的效果也是非常容易实现的。

本篇文章就是关于css3动画实现旋转移动特效的具体方法介绍，简单易懂，希望对需要的朋友有所帮助！