css+div实现开屏logo动画效果代码-html代码-BFW代码库

css+div实现开屏logo动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现开屏logo动画效果代码

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

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

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

  
  
  
<style>
/* 
  The 2024 State of CSS Survey is Now Open!
  https://survey.devographics.com/en-US/survey/state-of-css/2024
 */

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.socss {
  position: relative;
  
  --duration: 6s;
}

.lines {
  
  div {
    position: absolute;
    -webkit-animation: line var(--duration) var(--delay, 0s) infinite ease-in-out both;
            animation: line var(--duration) var(--delay, 0s) infinite ease-in-out both;
  }
    
  .line_a {
    inset: -6px -97px;
    background-image: linear-gradient(to right, #5fdd1d, #32d434);
    translate: 2px -232px;
  }
  .line_b {
    inset: -8px -147px;
    background-image: linear-gradient(to right, #63dd1d, #3ac753);
    translate: 2px -181px;
    --delay: calc(var(--duration) * 0.02);
  }
  .line_c {
    inset: -10px -185px;
    background-image: linear-gradient(to right, #5fdd1c, #43bc6f);
    translate: 2px -125px;
    --delay: calc(var(--duration) * 0.04);
  }
  .line_d {
    inset: -12px -255px;
.........完整代码请登录后点击上方下载按钮下载查看