CSS 动画心动

最新推荐文章于 2023-12-13 09:41:49 发布

要讲故事

最新推荐文章于 2023-12-13 09:41:49 发布

阅读量128

点赞数

文章标签： css servlet java

本文链接：https://blog.csdn.net/Wzc0720/article/details/126291874

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
       *{
               margin: 0;
               padding: 0;
           }
           body{
               background-color: #26C9FF;
           }
           ul{
               width: 270px;
               height: 190px;
               margin: 100px auto;
           }
           ul li{
               list-style-type: none;
               width:20px ;
               height: 20px;
               float: left;
               border-radius: 20px;
               margin-right: 10px;
           }
           .box1{
               background-color: #f62e74;
               animation: love1 4s infinite ;
           }
           @keyframes love1{
               30%,50%{
                   height: 60px;
                   transform: translateY(-6px);
               }
               75%,100%{
                   height: 20px;
                   transform: translateY(0px);
               }
           }
           .box2{
               background-color: #f45330;
               animation: love2 4s infinite ;
           animation-delay: 0.15s;
           }
           @keyframes love2{
               30%,50%{
                   height: 125px;
                   transform: translateY(-34px);
               }
               75%,100%{
                   height: 20px;
                   transform: translateY(0px);
               }
           }
           .box3{
               background-color: #ffc883;
           animation: love3 4s infinite ;
           animation-delay: 0.3s;
           }
           @keyframes love3{
               30%,50%{
                   height:160px;
                   transform: translateY(-42px);
               }
               75%,100%{
                   height: 20px;
                   transform: translateY(0px);
               }
           }
           .box4{
               background-color: #30d268;
               animation: love4 4s infinite ;
           animation-delay: 0.45s;
           }
           @keyframes love4{
               30%,50%{
                   height: 180px;
                   transform: translateY(-32px);
               }
               75%,100%{
                   height:20px;
                   transform: translateY(0px);
               }
           }
           .box5{
               background-color:#006cb4;
               animation: love5 4s infinite ;
               animation-delay: 0.6s;
           }
           @keyframes love5{
               30%,50%{
                   height:190px;
                   transform: translateY(-18px);
               }
               75%,100%{
                   height: 20px;
                   transform: translateY(0px);
               }
           }
           .box6{
               background-color: #784697;
               animation: love4 4s infinite ;
               animation-delay: 0.75s;
           }
           .box7{
               background-color: #ffc883;
               animation: love3 4s infinite ;
               animation-delay: 0.9s;
               }
           .box8{
               background-color: #f45330;
               animation: love2 4s infinite ;
               animation-delay: 1.05s;
           }
           .box9{

               background-color: #f62e74;
               animation: love1 4s infinite ;
               animation-delay: 1.2s;
           }
       </style>
   </head>
   <body>
       <ul>
           <li class="box1">

           </li>
           <li class="box2">

           </li>
           <li class="box3">

           </li>
           <li class="box4">

           </li>
           <li class="box5">

           </li>
           <li class="box6">

           </li>
           <li class="box7">

           </li>
           <li class="box8">

           </li>
           <li class="box9">

           </li>
       </ul>
   </body>
</html>