我需要一个 CSS 动画,其中一条线的一部分 (200px) 被替换为另一种颜色(如渐变)。我该怎么做?
这是我当前的代码:
* {
margin: 0;
padding: 0 20px;
}
h1 {
text-align: center;
}
.lineHolder {
margin-top: 50px;
}
.line {
width: 100%;
height: 200px;
border: 1px solid black;
background: darkslateblue;
box-shadow: 200px 0px 200px -120px blueviolet inset;
animation: background 5s infinite alternate-reverse linear, background2 8s infinite alternate-reverse linear;
}
@keyframes background {
0% {
background: darkslateblue;
box-shadow: 0px 0px 200px -120px lightblue inset;
}
10% {
background: darkslateblue;
box-shadow: 200px 0px 200px -120px lightblue inset;
}
20% {
background: darkslateblue;
box-shadow: 400px 0px 200px -120px lightblue inset;
}
30% {
background: darkslateblue;
box-shadow: 600px 0px 200px -120px lightblue inset;
}
40% {
background: darkslateblue;
box-shadow: 800px 0px 200px -120px lightblue inset;
}
50% {
background: darkslateblue;
box-shadow: 1000px 0px 200px -120px lightblue inset;
}
60% {
background: darkslateblue;
box-shadow: 1200px 0px 200px -120px lightblue inset;
}
70% {
background: darkslateblue;
box-shadow: 1400px 0px 200px -120px lightblue inset;
}
80% {
background: darkslateblue;
box-shadow: 1600px 0px 200px -120px lightblue inset;
}
90% {
background: darkslateblue;
box-shadow: 1800px 0px 200px -120px lightblue inset;
}
100% {
background: darkslateblue;
box-shadow: 2000px 0px 200px -120px lightblue inset;
}
}
<div class="holder">
<h1>Run color line</h1>
<div class="lineHolder">
<div class="line"></div>
</div>
</div>
它在这个 site 上正常工作靠近页脚
最佳答案
您链接的网站不使用 box-shadow
来制作动画,它使用 background-image
搭配 gradients
。
如果您出于特定原因不需要盒子阴影,这里是我理解您需要的工作代码笔:https://codepen.io/matteopieroni/pen/pKmVVy
一条建议是使用不同的颜色,我认为您尝试使用的颜色太“接近”而无法提供您所链接网站的良好效果。在笔中,您可以取消注释第二个 background-image
行以查看不同颜色的效果。
关于css - 如何使用 box-shadow 制作 css 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51187578/