HTML+CSS实现光影划过效果

猿学

已于 2024-09-12 17:22:53 修改

阅读量290

点赞数 1

文章标签： html css 前端

于 2024-09-12 17:20:17 首次发布

资料多来源于网络，如有侵权，请联系本人予以删除

本文链接：https://blog.csdn.net/weixin_38787928/article/details/142181493

版权

HTML+CSS实现光影划过效果，效果如下方小小图

废话不多说直接上代码

<div class="logo_link">Hello Word!!</div>
<style>
 .logo_link{
width: 200px;
font-size:30px;
}
 .logo_link::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -460px;
  width: 200px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-45deg);
  animation: searchLights 1.5s ease-in 1s infinite;
}

@-webkit-keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
@-o-keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
@-moz-keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
@keyframes searchLights {
  0% {
    left: -80px;
    top: 0;
  }
  to {
    left: 130px;
    top: 0px;
  }
}
</style>