如何使用盒形阴影制作CSS动画

时间:2018-07-05 09:16:18

标签: css animation box-shadow

我需要一个CSS动画,其中将线的一部分(200像素)替换为另一种颜色(例如渐变色)。我该怎么办?

这是我当前的代码:

* {
  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上正常工作

1 个答案:

答案 0 :(得分:0)

您链接的站点不使用box-shadow进行动画处理,而是使用background-imagegradients配对。

如果您出于特定原因不需要盒子阴影,以下是我了解您需要的工作密码笔:https://codepen.io/matteopieroni/pen/pKmVVy

一个建议是使用不同的颜色,我认为您尝试使用的颜色过于“接近”,无法给出所链接网站的良好效果。在笔中,您可以取消注释第二行background-image的注释,以查看不同颜色的外观。