animaldemo 变长+变色

最新推荐文章于 2021-06-20 22:22:52 发布

你的孤独虽败犹荣

最新推荐文章于 2021-06-20 22:22:52 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78672298

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .box{
               height: 60px;
               width: 60px;
               background: red;
           }
           .box:hover{
               /*animation:myFrames 2s infinite;*/
               -webkit-animation: myFrames 1s infinite;
           }
           @-webkit-keyframes myFrames{
               0%{
                   background: red;
                   width: 100px;
               }
               25%{
                   background: pink;
                   width: 200px;
               }
               50%{
                   background: blue;
                   width: 300px;
               }
               75%{
                   background: yellow;
                   width: 400px;
               }
               100%{
                   background: green;
                   width: 500px;
               }

           }
       </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>