CSS 线条流星动画

最新推荐文章于 2025-03-13 12:54:12 发布

大力水手~

最新推荐文章于 2025-03-13 12:54:12 发布

阅读量281

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44705979/article/details/132336597

版权

在这里插入图片描述

<div class="control-xian line-left"></div>

.line-left::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 10px;
  background: linear-gradient(to left, transparent, #fff);
  animation: fade-left 3s linear infinite;
  box-shadow: 0px 0px 17px 5px #72dffa;
}
.control-xian {
      width: 149px;
      position: relative;
      height: 1px;
      border: 2px solid;
      border-image: linear-gradient(
          136deg,
          rgba(107, 191, 252, 1),
          rgba(0, 213, 227, 1)
        )
        2 2;
 }
@keyframes fade-left {
  0% {
    right: 0px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    right: calc(100% - 10px);
    opacity: 0;
  }
}