css实现立体多彩层次圆点圆柱滚动动画效果代码-html代码-BFW代码库

css实现立体多彩层次圆点圆柱滚动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现立体多彩层次圆点圆柱滚动动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        body {
          margin: 0;
          padding: 0;
          background-color: #000;
          box-sizing: border-box;
        }
        
        .box {
          position: relative;
          width: 100%;
          height: 100vh;
          overflow: hidden;
        }
        
        .line {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 140px;
          height: 250vh;
          box-shadow: inset -10px 0 40px black, inset 10px 0 40px black, inset -10px 0 10px rgba(255, 255, 255, 0.25), inset 10px 0 10px rgba(255, 255, 255, 0.25), 0 0 40px black;
        }
        
        @keyframes move1 {
          0% {
            background-position: 0 0;
          }
          100% {
            background-position: 35px -35px;
          }
        }
        @keyframes move2 {
          0% {
            background-position: 35px -35px;
          }
          100% {
            background-position: 0 0;
          }
        }
        .line1 {
          background: #222 radial-gradient(#6dff73 10px, #000 10px, #000 14px, transparent 14px);
          background-size: 35px 35px;
          transform: translate(-50%, -50%) rotate(45deg);
          z-index: 11;
          animation: move1 2s linear infinite;
        }
        
        .line2 {
          background: #222 radial-gradient(#db0aff 10px, #000 10px, #000 14px, transparent 14px);
          background-size: 35px 35px;
          transform: translate(-50%, -39%) rotate(45deg);
          z-index: 3;
          animation: move2 2s linear infinite;
        .........完整代码请登录后点击上方下载按钮下载查看