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动画实现旋转移动特效的具体方法介绍，简单易懂，希望对需要的朋友有所帮助！
更多炫酷CSS3、html5、javascript特效代码，尽在：javascript特效大全
想要了解更多前端相关知识，可以关注PHP中文网CSS3视频教程、CSS视频教程、Bootstrap教程等等相关教程，欢迎大家参考学习！
以上是Css3如何实现旋转移动动画特效的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
