m0_46602893
m0_46602893
2021-01-24 21:07

HTML我用HTML编写的代码——跳动的心,为什么总是向左边跳动?

  • css
  • html5

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Document</title>

</head>

      <style>

            body{

                  margin: 600px;

                  animation:xxx 1.5s infinite;  

            }

 

           .zuoxin, .youxin{

                  width: 60px;

                  height: 100px;

                  background-color: blue;

                  display: inline-block;

                  border-top-left-radius: 60px;

                  border-top-right-radius: 60px;

            }

            .zuoxin{

                  transform:translateX(35px) rotateZ(-45deg);

                  

            }

            .youxin{

                  transform:rotateZ(45deg);

            }

            

            @keyframes xxx {

                  50% { transform:scale(2);}

                  100% {transform:scale(1);}

            }

            

      </style>

<body>

      

            <div class="zuoxin"></div>

            <div class="youxin"></div>

      

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
      <style>
            body{
                  margin: 600px;
                  animation:xxx 1.5s infinite;  
            }

           .zuoxin, .youxin{
                  width: 60px;
                  height: 100px;
                  background-color: blue;
                  display: inline-block;
                  border-top-left-radius: 60px;
                  border-top-right-radius: 60px;
            }
            .zuoxin{
                  transform:translateX(35px) rotateZ(-45deg);
                  
            }
            .youxin{
                  transform:rotateZ(45deg);
            }
            
            @keyframes xxx {
                  50% { transform:scale(2);}
                  100% {transform:scale(1);}
            }
            
      </style>
<body>
      
            <div class="zuoxin"></div>
            <div class="youxin"></div>
      
</body>
</html>

 

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

3条回答