爱心代码

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .container{
          width: 300px;
          height: 300px;
          margin: 100px 0 0 45%;
          position: relative;
      }
     .container div:first-child{
         height: 50px;
         width: 100px;
         transform: rotate(45deg) translate(159px,-56px);
         border-radius: 50px 50px 0 0;
         background-color: red;
    }
      .container div:nth-of-type(2){
          height: 50px;
          width: 100px;
          transform: rotate(-45deg) translate(18px,49px);
          border-radius: 50px 50px 0 0;
          background-color: red;
    }
      .container div:nth-of-type(3){
          height: 100px;
          width: 100px;
          margin-left: 100px;
          position: absolute;
          transform: rotate(45deg);
          background-color: red;
    }
      .container{
          animation: jump 2s ease-out 0.5s infinite;
      }
      @keyframes jump {
          0%{
              transform: scale(1);
          }
          30%{
              transform: scale(1.3);
          }
          100%{
              transform: scale(1);
          }
      }
  </style>
</head>
<body>
  <div class="container">
      <div></div>
      <div></div>
      <div></div>
  </div>
</body>
</html>