小红心（桃心）跳动

最新推荐文章于 2024-05-08 12:04:17 发布

荒·原

最新推荐文章于 2024-05-08 12:04:17 发布

阅读量1.2k

点赞数 2

分类专栏： html 文章标签： html;小红心跳动;桃心跳动

本文链接：https://blog.csdn.net/weixin_42939672/article/details/82901874

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>心跳</title>
  <meta name="keyword" content="">
  <style>
   *{
    margin:0;
    padding:0;
   }
   body{
    width:100%;
    height:100%;
    background:pink;
   }
   .yi{
    position:relative;
    margin:500px auto;
    width:80px;
    height:80px;
    background:red;
    -webkit-animation:tiao 1s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
   }
   .yii{
    position:absolute;
    left:0px;
    top:-45px;
    height:80px;
    width:80px;
    background:red;
    border-radius:50px;
   }
   .yiy{
    position:absolute;
    left:45px;
    top:0px;
    height:80px;
    width:80px;
    background:red;
    border-radius:50px;
   }
   @-webkit-keyframes tiao{
    0%   {transform:rotate(-45deg) scale(1);}
    40%  {transform:rotate(-45deg) scale(1);}
    55%  {transform:rotate(-30deg) scale(1.2);}
    70%  {transform:rotate(-30deg) scale(1.2);}
    85%  {transform:rotate(-60deg) scale(.5);}
    100% {transform:rotate(-45deg) scale(1);}
   }
  </style>
 </head>
 <body>
  <div class="yi">
   <div class="yii"></div>
   <div class="yiy"></div>
  </div>
 </body>
</html>