m0_46602893 2021-01-24 21:07 采纳率: 91.5%
浏览 156
已结题

HTML我用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>

<!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条回答 默认 最新

  • 天际的海浪 2021-01-24 21:37
    关注

    transform:scale(2);默认是以元素中心为原点进行缩放的，
    你对body元素进行缩放，就是以整个页面的中心为原点进行缩放，
    你的心形不在整个页面的中心，整个页面缩放之后自然会偏离。
     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 9月4日
  • 已采纳回答 8月27日

悬赏问题

  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人，不要ai！matlab有关常微分方程的问题求解决，
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？
  • ¥100 求三轴之间相互配合画圆以及直线的算法