Css3如何实现旋转移动动画特效-pengetahuan css-php.cn

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

藏色散人

Lepaskan： 2019-11-30 16:38:37

asal

8441 orang telah melayarinya

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

Salin selepas log masuk

效果如下图：

录制_2018_10_19_11_06_21_575.gif