首页 前端知识 css 边框流光效果

css 边框流光效果

2024-02-03 12:02:59 前端知识 前端哥 944 216 我要收藏

前端在做一些界面,尤其是当下各种忽悠人的大屏盛行。就得用一些稍微炫酷唬人点的东西给大家伙瞅瞅,不然怎么忽悠别人。

图示:

以下是代码,如果不想研究实现原理可直接复制粘贴。

首先边框,在原有的边框内部需要加两个元素作为两条线,另外两条线用伪类元素--before和after。

<div class="box">
        <i class="top"></i><i class="bottom"></i>
</div>

style如下,这里用了scss 可根据需求自行更改。

<style scoped lang="scss">
.box {
    width: 40%;
    height: 100%;
    border: 1px solid #00bbff;
    position: relative;
    overflow: hidden;
    &::before {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 100%;
      top: -100%;
      left: 0;
      background-image: linear-gradient(
        0deg,
        transparent,
        #74efff,
        transparent
      );
      animation: two 4s linear infinite;
    }
    &::after {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 100%;
      bottom: -100%;
      right: 0;
      background-image: linear-gradient(
        360deg,
        transparent,
        #74efff,
        transparent
      );
      animation: four 4s linear 2s infinite;
    }
    i {
      position: absolute;
      display: inline-block;
      height: 4px;
      width: 100%;
    }
    .bottom {
      bottom: 0;
      left: -100%;
      background-image: linear-gradient(
        270deg,
        transparent,
        #74efff,
        transparent
      );
      animation: one 4s linear 1s infinite;
    }
    .top {
      top: 0;
      right: -100%;
      background-image: linear-gradient(
        270deg,
        transparent,
        #74efff,
        transparent
      );
      animation: three 4s linear 3s infinite;
    }}
@keyframes one {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

@keyframes four {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1155.html
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!