html移动动画

最新推荐文章于 2025-07-12 15:02:52 发布

Charlie·

最新推荐文章于 2025-07-12 15:02:52 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：混合开发文章标签： html移动动画

本文链接：https://blog.youkuaiyun.com/Mydtudysy/article/details/77777260

混合开发专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: darkblue;
            color: #ffffff;
            margin: 0 auto;
        }
        .box:hover{
            transform: rotate(360deg) scale(2,1.2);
        }


        .pop{
            width: 500px;
            height: 50px;
            background: red;
            animation: change 5s infinite ;
            animation-fill-mode: forwards;
        }

        @keyframes change {
            0%{
                width: 500px;
            }
            50%{
                width: 800px;
            }
            100%{
                width: 300px;
            }
        }

    </style>
</head>
<body>
   <div class="box">CSS过度</div>
<div class="pop"></div>
</body>
</html>