css 光影掠过效果

css光影闪烁效果

---

---

前言

---

一、HTML

示例：

<div class="box">
  <div class="box_title">asdfasdfasdfasdfasdfa</div>
</div>

二、使用步骤

代码如下（示例）：

.box {
  width: 800px;
  height: 100px;
  overflow: hidden;
}
.box_title {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.box_title:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  left: -50%;
  overflow: hidden;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 25%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 75%);
  transform: skewX(-45deg);
  animation: showlight 1s infinite linear;
}
@keyframes showlight {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

效果

---

总结