关于css3:css3心跳动画

13次阅读

共计 1088 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> 情人节心跳动动画 </title>
    <style type="text/css">
       html, body{
          width: 100%;
          height: 100%;
          min-width: 500px;
          min-height: 500px;
          overflow: hidden;
        }
        .heart {
          position: absolute;
          width: 100px;
          height: 90px;
          top: 50%;
          left: 50%;
          margin-top: -45px;
          margin-left: -50px;
        }
        .heart:before,
        .heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: #fc2e5a;
          border-radius: 50px 50px 0 0;
          transform: rotate(-45deg);
          transform-origin: 0 100%;
        }
        .heart:after {
          left: 0;
          transform: rotate(45deg);
          transform-origin :100% 100%;
        }
        .heart1{animation: heart-anim 1s linear .4s infinite;}
        .heart2{animation: pounding .5s linear infinite alternate;}
        .heart1:after, .heart1:before{background-color: #ff7693;}

        @keyframes pounding{0%{ transform: scale(1.5); }
          100%{transform: scale(1); }
        }
        @keyframes heart-anim {
          46% {transform: scale(1);
          }
          50% {transform: scale(1.3);
          }
          52% {transform: scale(1.5);
          }
          55% {transform: scale(3);
          }
          100% {
            opacity: 0;
            transform: scale(50);
          }
        }
    </style>
</head>
<body>
    <!-- 外圈大心 -->
   <div class="heart heart1"></div>
  <!-- 外面小心 -->
   <div class="heart heart2"></div>
</body>
<script type="text/javascript">

</script>
</html>

正文完