HTML 中animation的应用

最新推荐文章于 2024-07-20 11:04:35 发布

Playful_Elbow

最新推荐文章于 2024-07-20 11:04:35 发布

阅读量559

点赞数

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124346485

版权

<!DOCTYPE html>
<html>
<head>
    <title>animation动画</title>
    <meta charset="utf-8" />
    <style type="text/css">
      html,body{
        background-color:#000000;
        width:600px;
        height:600px;
        overflow:hidden;
      }
      #clock{
        position:relative;

        width:300px;
        height:300px;

        background-repeat:no-repeat;
        background-size:cover;
       background-image:url("res/lianxi/fun/pic/1.png");
       animation: ripple 2s linear infinite;
        /*补全css样式和animation动画*/
      }

      @keyframes ripple{
        /*补全animation动画效果*/
        0%{
           width:300px;
             height:300px;
        }
        50%{
             width:600px;
             height:600px;
        }
      }

    </style>
</head>
<body>
      <div id="clock">

    </div>
</body>

</html>