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>
rotate属性css3中相关重要属性介绍：
transform ：
transform属性表⽰向元素应⽤ 2D 或 3D 转换，可以对元素进⾏旋转、缩放、移动或倾斜。
@keyframes：
通过 @keyframes 规则，您可以创建动画。也就是说这⾥的@keyframes只是⽤于定义动画，并没有实际含义。
⽽css动画的实现原理，也就是从⼀个css样式逐渐变换为另⼀个css样式。
其中以百分⽐（或者"from" 和 "to"）来规定改变发⽣的时间。（0% 是动画的开始时间，100% 动画的结束时间。）只要⼤家掌握了css动画原理，那么想要通过纯css做⼤多数酷炫的效果也是⾮常容易实现的。
本篇⽂章就是关于css3动画实现旋转移动特效的具体⽅法介绍，简单易懂，希望对需要的朋友有所帮助！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。