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;
    background-image: linear-gradient(to right, #6ade1e, #4eac95);
    translate: 2px -65px;
    --delay: calc(var(--duration) * 0.06);
  }
  .line_e {
    inset: -14px -283px;
    background-image: linear-gradient(to right, #5ede1d, #4eac96);
    --delay: calc(var(--duration) * 0.08);
  }
  .line_f {
    inset: -12px -255px;
    background-image: linear-gradient(to right, #36de1b, #4eac95);
    translate: 2px 64px;
    --delay: calc(var(--duration) * 0.1);
  }
  .line_g {
    inset: -10px -185px;
    background-image: linear-gradient(to right, #33d239, #4fac95);
    translate: 2px 124px;
    --delay: calc(var(--duration) * 0.12);
  }
  .line_h {
    inset: -8px -147px;
    background-image: linear-gradient(to right, #3cc655, #4eac96);
    translate: 2px 180px;
    --delay: calc(var(--duration) * 0.14);
  }
  .line_i {
    inset: -6px -97px;
    background-image: linear-gradient(to right, #44ba72, #4fac96);
    translate: 2px 231px;
    --delay: calc(var(--duration) * 0.16);
  }
}

@-webkit-keyframes line {
  0% {
    opacity: 0;
    transform: translateX(-500px) scale(0);
  }
  
  10%, 80% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
  90%, 100% {
    opacity: 0;
    transform: translateX(500px) scale(0);
  }
}

@keyframes line {
  0% {
    opacity: 0;
    transform: translateX(-500px) scale(0);
  }
  
  10%, 80% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
  90%, 100% {
    opacity: 0;
    transform: translateX(500px) scale(0);
  }
}

.sqrs {

  div {
    position: absolute;
    -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    -webkit-animation: sqr var(--duration) var(--delay, 0s) infinite ease-in-out both;
            animation: sqr var(--duration) var(--delay, 0s) infinite ease-in-out both;
  }
    
  .sqr_a {
    inset: -250px;
    background-image: linear-gradient(to right, #73fa4f, #70fa41 33%, #45cc27 50%, #154c0a);
    --delay: calc(var(--duration) * 0.1);
  }
  .sqr_b {
    inset: -187.5px -250px;
    background-image: linear-gradient(to right, #a2ed96, #4eeb34 33%, #33df1d 50%, #0b8a1c);
    --delay: calc(var(--duration) * 0.12);
  }
  .sqr_c {
    inset: -125px -250px;
    background-image: linear-gradient(to right, #beeda1, #6deb3e, #32c615);
    --delay: calc(var(--duration) * 0.14);
  }
  
  &::before {
    content: '';
    position: absolute;
    inset: -272px -250px;
    -webkit-clip-path: polygon(50% 20px, 100% 50%, 50% 100%, 0 50%);.........完整代码请登录后点击上方下载按钮下载查看