纯CSS制作“跳动的心”demo

2022-02-17 02:00:03

<!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;
           /*transform: rotate(45deg);*/
       }

       .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"></div>
       <div class="heart right side"></div>
   </div>
</body>
</html>

码农公寓

相关文章