CSS3之heart跳动

一、效果图

二、源码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Red Heart</title>
   <style>
      html, body {
         height: 100%;
      }

      body {
         margin: 0;
         padding: 0;
         background: #ffa5a5;
         background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
      }

      .chest {
         width: 500px;
         height: 500px;
         margin: 0 auto;
         position: relative;
      }

      .heart {
         position: absolute;
         z-index: 2;
         background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
         animation: beat 0.7s ease 0s infinite normal;
      }

      .heart.center {
         background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
      }

      .heart.top {
         z-index: 3;
      }

      .side {
         top: 100px;
         width: 220px;
         height: 220px;
         border-radius: 220px;
      }

      .center {
         width: 210px;
         height: 210px;
         bottom: 100px;
         left: 145px;
         font-size: 0;
         text-indent: -9999px;
      }

      .left {
         left: 62px;
      }

      .right {
         right: 62px;
      }


      @keyframes beat {
         0% {
            transform: scale(1) rotate(225deg);
            box-shadow:0 0 40px #d5093c;
         }

         50% {
            transform: scale(1.1) rotate(225deg);
            box-shadow:0 0 70px #d5093c;
         }

         100% {
            transform: scale(1) rotate(225deg);
            box-shadow:0 0 40px #d5093c;
         }
      }
   </style>
</head>
<body>
   <div class="chest">
      <div class="heart left side top"></div>
      <div class="heart center">&hearts;</div>
      <div class="heart right side"></div>
   </div>
</body>
</html>
一、效果图

二、源码

猜你喜欢
