css3 animation小动画

最新推荐文章于 2024-08-26 19:16:26 发布

#麻辣小龙虾#

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量620

点赞数

分类专栏： HTML5 web前端 CSS3 文章标签： css3 动画

本文链接：https://blog.csdn.net/CodingNoob/article/details/77866592

版权

web前端同时被 3 个专栏收录

99 篇文章 2 订阅

订阅专栏

HTML5

27 篇文章 0 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css3 animation小动画 </title>
        <style>
            .box{
                height:100px;
                width:100px;
                position:relative;
                left:-100px;
                line-height:100px;
                text-align: center;
                color:#fff;
                font-size:20px;
                font-family: Arial, Helvetica, sans-serif;
                background:blue;
                animation: move 4s linear infinite reverse;
            }
            .wrap{
                width:800px;
                height:150px;

            }
            @keyframes move{
                0%{
                    left: -100px;
                    top:50px;
                    transform: scale(1.1) rotate(60deg);
                }
                30%{
                    left: 500px;
                    top:30px;
                    transform: scale(1.3) rotate(120deg);
                }
                50%{
                    left: 350px;
                    top:20px;
                    transform: scale(1.5) rotate(180deg);
                }
                70%{
                    left: 200px;
                    top:10px;
                    transform: scale(1.3) rotate(240deg);
                }
                100%{
                    left:-200px;
                    top:0;
                    transform: scale(1) rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">Animation</div>
        </div>

    </body>

</html>