div+css实现光影线条穿梭动画效果代码-html代码-BFW代码库

div+css实现光影线条穿梭动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现光影线条穿梭动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
* {
  box-sizing: border-box;
  margin: auto;
}

body {
  position: relative;
  height: 100vh;
  display: flex;
  background: #0f0f0f;
  overflow: hidden;
  perspective: 1440px;
}

.logo {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}
.logo::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 50px;
  background: #ffffff3f;
  border-radius: 50%;
  opacity: 0;
  filter: blur(50px) url(#noiseFilter);
  animation: osc 10s linear infinite 1s;
}
.logo::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #0f0f0f9f;
  border-radius: 50%;
}

.line {
  position: absolute;
  width: 50px;
  height: 1px;
  background: #f0f0f05f;
  animation: colorin 1.1s ease-in-out 1, osc 0.1s linear infinite 3s;
  z-index: 10;
}
.line::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 1000%;
  left: -50%;
  top: -500%;
  background: #ffffff2f;
  filter: blur(8px);
}
.line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffffaf;
  opacity: 0;
  animation: stream 0.621s linear infinite alternate-reverse;
}
.line.left {
  left: 63px;
  rotate: 35deg;
  top: 55%;
  animation-delay: 0.03s, 1.03s;
}
.line.left::after {
  animation-delay: 1.83s;
}
.line.left.top {
  rotate: -35deg;
  top: 45%;
  animation-delay: 0.003s, 1.003s;
}
.line.left.top::after {
  animation-delay: 1.63s;
}
.line.middle {
  width: 100px;
  left: 100px;
  top: 50%;
  rotate: 35deg;
  animation-delay: 0.21s, 1.21s;
}
.line.middle::after {
  animation-delay: 1.04s;
}
.line.middle.top {
  rotate: -35deg;
  animation-delay: 0.3s, 1.3s;
}
.line.middle.top::after {
  animation-delay: 1.3s;
}
.line.right {
  right: 63px;
  rotate: -35deg;
  top: 55%;
  animation-delay: 0.23s, 1.23s;
}
.line.right::after {
  animation-delay: 1.8s;
}
.line.right.top {
  rotate: 35deg;
  top: 40.........完整代码请登录后点击上方下载按钮下载查看