用css写一个边框流动特效

最新推荐文章于 2025-07-29 18:09:33 发布

yi_mu?

最新推荐文章于 2025-07-29 18:09:33 发布

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.csdn.net/sdfsd342w35r/article/details/134643950

本文介绍了如何使用CSS中的z-index、before和after伪元素，结合animation属性，创建出视觉上流动的线条效果，通过控制元素尺寸和溢出隐藏实现动态效果。

原理: 将item盒子中的文字的z-index置于顶部, 用before伪元素制造一个长方形盒子, 通过animation动画让他一直旋转, 在用after元素将before大部分遮住,再将超出盒子的部分隐藏,视觉上就形成了流动的线,

.infoCon .content .item{
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgb(11 98 245 / 41%);
  width: 17%;
  height: auto;
  padding: 22px 20px;
  color: #fff;
  position: relative;
}
.infoCon .content .item .num{
  z-index: 1;  // 将文字置于顶部
  font-size: 28px;
  font-weight: 800;
  text-shadow: 1px 1px #6ecee5;
}
.infoCon .content .item:nth-child(2) .tit{
  z-index: 1;
  color: #fdf196;
  font-size: 18px;
  font-weight: 1000;
}

.infoCon .content .item:first-child{
  margin-right: 30px;
}

.infoCon .content .item::before{
  content: "";
  position: absolute;
  width: 112%;
  height: 62%;
  background: rgb(255,255,255); // 渐变
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,175,237,1) 100%);
  animation: rotate 5s linear infinite; // 秒数可以改变流动的快慢
}

@keyframes rotate {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.infoCon .content .item::after{
  content: "";
  position: absolute;
  background-color: rgb(48 76 102);
  inset: 2px; // inset是top: 2px;right: 2px;bottom: 2px;left: 2px; 的缩写,
  						// inset越大,流动的线越宽(after去遮挡before元素)
  border-radius: 10px;
}

.infoCon .content .item{
  overflow: hidden; // 超出item部分隐藏
}

实际上before的大小