首页 前端知识 使用CSS制作流动线效果

使用CSS制作流动线效果

2024-02-14 09:02:20 前端知识 前端哥 643 679 我要收藏

这回项目要做一个大屏展示,大概样式是,中间一个地球,向外发射几条蓝色直线,直线另一头是展示的标题。为了体现科技感,蓝色直线要做出一种像水流一样的流动特效。

在这里插入图片描述
白光向上流动。

下面上代码。

<div class="line line-left line1"></div>
.line {
  background: #01dde8; // 线的颜色
  height: 4px; // 线的宽度
  position: absolute;
  transform-origin: left top;
  z-index: 10;
  
  width: 20px; // 线的长度
  top: 50px; // 位置上偏移
  left: 50px; // 位置左偏移
  transform: rotateZ(35deg); // 线的旋转角度
}

// 用来做流动效果的
.line-left::before {
  content: "";
  position: absolute;
  height: 4px; // 流体的宽度,可以适当宽一些,但是注意位置偏移
  width: 40px; // 流体路线长度,最好与线保持一致
  background: linear-gradient(to left, transparent, #fff); // 流体样式,这里是渐变
  animation: fade-left 3s linear infinite; //使用fade-left动画
  box-shadow: 0px 0px 17px 5px #72dffa; // 外发光
}

// 向左流动,right改left为向右流动
@keyframes fade-left {
  0% {
    right: 0px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    right: calc(100% - 40px); // 到达终点时位置要减去自身的长度
    opacity: 0;
  }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1973.html
标签
评论
发布的文章

jQuery 下载与安装教程

2024-02-28 11:02:44

若依中jquey相关问题

2024-02-28 11:02:41

【JavaWeb】1.JQuery

2024-02-28 11:02:21

jQuery日历签到插件下载

2024-02-28 11:02:20

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