css3 心跳动的动画

作者: 干炸里脊不如你 | 来源:发表于2019-06-19 10:33 被阅读0次

CSS3炫酷效果 - 音符在跳动
网页高级知识点（三）
css3 心跳动的动画
前端学习代码实例-CSS3心形效果代码
08_dayCSS动画
07day
CSS3 动画
css3动画
CSS3 动画
简单的CSS3 心跳动画

<!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>
  <p>
  情人劫到了又。。。。一大波活动来了。。一大波新（ma）颖（bi）的需求提了出来。。。。心好累 好疲惫
   效果很简单。。还是想着发出来。以后直接用就好了 省的还得去找....
 </p>
    <!--外圈大心-->
   <div class="heart heart1"></div>
  <!--里面小心-->
   <div class="heart heart2"></div>
</body>
<script type="text/javascript">

</script>
</html>