时间戳

首页 > 解决方案 > 如何移动倾斜的 div

css - 如何移动倾斜的 div

问题描述

我正在尝试将倾斜的 div 从屏幕左上角通过屏幕移动到屏幕右下角。我想要得到的效果是它看起来像一个平行四边形从某个地方向上和向左出现，它以向下和向右的运动缓慢地穿过屏幕，然后离开屏幕到底部。

现在我有这个 index.html：

<html>                                                                          
  <head>                                                                        
    <link rel="stylesheet" href="index.css" />                                  
  </head>                                                                       
  <body>                                                                        
    <div class="div1" id="one"></div>                                           
  </body>                                                                                                           
</html>

这是我的 index.css：

div {
  animation: rotate-all 2s 0 infinite linear alternate;
}

.div1 {
  width: 100px; 
  height: 1000px;
  transform: skew(20deg);
  background-color: gray;
  position: relative;
  margin: auto;
  animation-name: down;
  animation-duration: 4s;
  animation-iteration-count: infinite ;

}

#one {
  top: 150px;
}

@keyframes down {
  0%  {
    transform: translate(-200px, -1000px);
    transform: skew(20deg);
  }
  100% {
    transform: translate(250px, 750px);
  }
}

我有两个问题：

首先，它正在将形状从倾斜的形状（看起来像“\”）更改为不倾斜的形状（看起来像“|”）。如果我尝试在我的 100% 关键帧中添加一个倾斜，那么它不再移动，它只是停留在同一个地方。我尝试了两个订单倾斜然后翻译/翻译然后倾斜。

其次，它似乎不是从屏幕上方开始，而是在屏幕中间。

感谢任何建议。

标签： cssanimation

解决方案

您正在覆盖该transform属性。Transform 接受多种样式，以空格分隔。如果您添加该transform属性两次，它将覆盖第一个。只需将translateandskew两次都放在同一行上，它就会起作用。

对于第二部分，translate它按百分比（相对于自身）而不是像素（绝对度量）。

div {
  animation: rotate-all 2s 0 infinite linear alternate;
}

.div1 {
  width: 100px; 
  height: 1000px;
  transform: skew(20deg);
  background-color: gray;
  position: relative;
  margin: auto;
  animation-name: down;
  animation-duration: 4s;
  animation-iteration-count: infinite ;

}

#one {
  top: 150px;
}

@keyframes down {
  0%  {
    transform: translate(-200%, -200%) skew(20deg);
  }
  100% {
    transform: translate(250px, 750px) skew(20deg);
  }
}
<div class="div1" id="one"></div>

推荐阅读