css实现动画网格线条相交动画效果代码-html代码-BFW代码库

css实现动画网格线条相交动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现动画网格线条相交动画效果代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    background: 
    #1e1e1e
    repeating-linear-gradient(34deg, #4442 0px, #4442 4px, transparent 4px, transparent 8px);
    font-family: "Anta", sans-serif;
}

.grid::before, .grid::after {
    content:''; display: block;
    position: absolute;
    width: 100vw; height: 100vh;

    --line-sz: 2vh;
    --line-thickness: 2px;
    --fct: 1/12;
    --line-clr: #555;
    --at: 2s;

    --xsz: 100vh ; --ysz: 100vh;
    --ox: calc(-0.45 * var(--line-sz));
    --oy: calc(0.54 * var(--line-sz));

    box-shadow: inset 0 0 calc( min(100vw,100vh) * 0.04) calc( min(100vw,100vh) * 0.11) #000;
    border-radius: min(20vw, 20vh);
    z-index: -1;
}

@media (max-height: 600px) {
    .grid::before, .grid::after {
        --line-sz: 3vh;
        --fct: 1/8;
    }
}
@media (max-height: 400px) {
    .grid::before, .grid::after {
        --fct: 1/6;
    }
}
.grid::before {
    background:
    calc(0em + var(--ox)) 0 repeating-linear-gradient(90deg, transparent 0, transparent var(--line-sz), #000 var(--line-sz), #000 calc(var(--xsz) * var(--fct)) ),
    calc(0em + var(--ox)) 0 repeating-linear-gradient(var(--line-clr) 0, var(--line-clr) var(--line-thickness), #000 var(--line-thickness), #000 calc(var.........完整代码请登录后点击上方下载按钮下载查看