微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

效果如下图:

录制_2018_10_19_11_06_21_575.gif


css3中相关重要属性介绍:

transform :

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

@keyframes:

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

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

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

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

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

更多炫酷CSS3、html5、javascript特效代码,尽在:javascript特效大全

想要了解更多前端相关知识,可以关注编程之家CSS3视频教程CSS视频教程Bootstrap教程等等相关教程,欢迎大家参考学习!

以上就是Css3如何实现旋转移动动画特效的详细内容,更多请关注编程之家其它相关文章

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。