我试图使这条线表现得像一缕阳光,对角线右下(and)和左上(↖)移动。尽管使用了降低高度功能,但我得到的还是上下运动。

在GIF中预览(使用图片编辑器创建):

html - 如何为扩展/收缩而不是向上/向下动画-LMLPHP



body {
    background-color: grey;
}

.sunray {
    height: 200px;
    width: 5px;
    background-color: white;
    opacity: 0.9;
    filter: blur(5px);
    transform: rotate(135deg);
    position: relative;
    left: 60px;
    top: -50px;
}

.sunray {
    animation: ray 1s linear infinite;
    animation-direction: alternate-reverse;
}

@keyframes ray {
    from { height: 200px; }
    to   { height: 50px; }
}

<div class="sunray"></div>

最佳答案

body {
  background-color: grey;
}

.container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  outline: 1px solid black;
}

.sunray {
  height: 200px;
  width: 5px;
  background-color: white;
  opacity: 0.9;
  filter: blur(5px);
  position: relative;
  left: 60px;
  top: -50px;
}

.sunray {
  animation: ray 1s linear infinite;
  animation-direction: alternate-reverse;
}

@keyframes ray {
  from {
    transform: translate(-50px, -50px) rotate(-45deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

<div class="container">
  <div class="sunray"></div>
</div>

关于html - 如何为扩展/收缩而不是向上/向下动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59594931/

10-12 00:17