CSS3で回転と移動のアニメーション効果を実装する方法-CSSの知識-php.cn

CSS3で回転と移動のアニメーション効果を実装する方法

藏色散人

リリース： 2019-11-30 16:38:37

オリジナル

8400 人が閲覧しました

この記事では回転効果を実現するcss3アニメーションを中心に紹介します。

css はカスケードスタイルシートであり、フロントエンドを学習している友人はよく知っているはずです。クールなアニメーション効果を使用すると、Web サイトの外観がより洗練され、コンテンツが充実してユーザーを引き付けることができることを誰もが知っているはずです。

ここで、画像の回転効果を実現する、シンプルで興味深いアニメーション特殊効果を紹介します。

<!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で回転と移動のアニメーション効果を実装する方法