我试图让这条线表现得像一缕阳光,沿对 Angular 线向右下方 (↘) 和向左上方 (↖) 移动。尽管使用了高度降低,但我得到的是上/下。
在 GIF 中预览(使用图像编辑器创建):
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/