svg+css实现人工智能迷宫背景动画效果代码

代码语言:html

所属分类:背景

代码描述:svg+css实现人工智能迷宫背景动画效果代码

代码标签: 迷宫 背景 动画 效果

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

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

<head>

   
<meta charset="UTF-8">

   
<style>
        body
{
           
width: 100%;
           
height: 100vh;
           
overflow: hidden;
           
margin: 0px;
           
padding: 0px;
           
background: #003655
       
}
        svg
{
           
width: 100%;
       
}

       
.st0 {
           
stroke-dasharray: 2050 1000 40 80 1500 1000 2050;
           
animation: dash 30s infinite linear;
       
}

@keyframes dash {
            to
{
               
stroke-dashoffset: 4000;
           
}
       
}
   
</style>

</head>


<body>

   
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       
viewBox="0 0 1200 800" style="enable-background:new 0 0 1200 800;" xml:space="preserve">
       
<style type="text/css">
           
.st0 {
               
fill: none;
               
stroke: #00C3E5;
               
stroke-width: 1;
               
stroke-miterlimit: 10;
               
stroke-dasharray: 60,100,300,120,220,24;
           
}
       
</style>
       
<g>
           
<path class="st0" d="M620.1,933.2l33.9-33.9l17-17l-17-17l-51.8-51.8l84.9-84.9l-17-17l-84.9,84.9l-17,17l-17.8,17.8l-17-17
                l33.9-33.9l17.8-17.8l-16.1-16.1l-17.8-17.8l16.1-16.1l33.9,33.9l17-17l-33.9-33.9l17-17l17-17l-16.1-16.1l-17-17l33.9-33.9l17-17
                l25.5-25.5l-17-17l-25.5,25.5l-17.8-17.8l93.3-93.3l-16.1-16.1L654,458l-34.8-34.8l50.9-50.9l16.1-16.1l34.8-34.8L705,305.3
                l-34.8,34.8l-17-17l-17-17l-42.4-42.4l-16.1,16.1l42.4,42.4l-84.9,84.9l-17.8,17.8L501.3,441l17,17l16.1-16.1l50.9,50.9l17.8-17.8
                l-50.9-50.9l84.9-84.9l17,17l-50.9,50.9l-17,17l16.1,16.1l34.8,34.8l-85.7,85.7l-17.8-17.8l33.9-33.9l-17-17l-33.9,33.9l-17,17
                l-33.9,33.9l-16.1-16.1l50.9-50.9l17-17l-17-17l-51.8-51.8l-17,17l51.8,51.8l-50.9,50.9l-25.5-25.5l-17-17l-25.5-25.5l17-17
                l50.9,50.9l17-17l-50.9-50.9l-17-17l-17,17l-17,17l-17-17l-17,17l17,17l-67.9,67.9l17,17l67.9-67.9l25.5,25.5l-17,17l17,17l17-17
                l25.5,25.5l17,17l16.1,16.1l-16.1,16.1l-16.1-16.1L398.6,576l-17.8,17.8l-33.1,33.1l17.8,17.8l33.1-33.1l16.1,16.1l17,17l17,17
                l-17,17l-33.1-33.1l-16.1,16.1l33.1,33.1l-17.8,17.8l-84.9-84.9l-17,17l84.9,84.9l17,17l17-17l17.8-17.8l16.1-16.1l17-17l17.8-17.8
                l16.1-16.1l51.8,51.8l-16.1,16.1l-17-17l-17.8-17.8l-17.8,17.8l-16.1,16.1l-17.8,17.8l-33.1,33.1l17.8,17.8l33.1-33.1l33.1,33.1
                l17.8-17.8l-33.1-33.1l16.1-16.1l17,17l16.1,16.1l17.8,17.8l-33.9,33.9l-17,17l-34.8-34.8l-17,17l34.8,34.8l16.1,16.1l17-17l17,17
                l-17,17l17,17l17-17l33.9,33.9l17-17l-33.9-33.9l17.8-17.8l51.8,51.8l-33.9,33.9L585.3,934l17,17l33.1,33.1l17.8-17.8L620.1,933.2z
                M516.6,627.7l-17-17l-17,17l-16.1,16.1l-17-17l16.1-16.1l17-17l33.9-33.9l17.8,17.8l-17,17l16.1,16.1l17-17l17-17l17-17l17.8,17.8
                l-33.9,33.9l-17,17l17,17l17,17l-17,17L516.6,627.7z"
/>
           
<path class="st0" d="M245.1,559.8l-67,67l-67-67l-17,17l67,67l17.8,17.8l33.1,33.1l17.8,17.8l17-17l17-17l67,67l-17.8,17.8
                l-33.1-33.1L262,712.6l-16.1,16.1l-17.8,17.8l-84-84l-17,17l84,84l-42.4,42.4l17.8,17.8l42.4-42.4l17-17l17.8-17.8l33.1,33.1
                l17.8,17.8l84.9,84.9l16.1-16.1l-84.9-84.9l17.8-17.8l101.8,101.8l-51.8,51.8l-50.9-50.9l-17-17l-50.9-50.9l-17-17l-16.1,16.1
                l-18.7,18.7L212,832.2l-16.1,16.1l17,17l16.1-16.1l50.9,50.9l17,17l16.1-16.1l18.7-18.7l50.9,50.9l17,17l16.1-16.1l51.8-51.8l17-17
                l-17-17L365.5,746.5l-17.8-17.8l-67-67l-17.8-17.8l67.9-67.9l17,17l16.1-16.1l-17-17l-17-17L313.8,559l-67.9,67.9l-17,17l17,17
                l-17,17l-33.1-33.1l67-67L245.1,559.8z M296,884l-50.9-50.9l18.7-18.7l50.9,50.9L296,884z"
/>
           
<polygon class="st0" points="449.6,17.6 432.6,0.7 416.5,16.8 433.4,33.8 450.4,50.7 466.5,34.6 534.4,-33.3 550.5,-17.2
                516.6,16.8 534.4,34.6 568.3,0.7 584.5,16.8 601.4,-0.2 585.3,-16.3 618.4,-49.4 600.6,-67.2 567.5,-34.1 551.4,-50.3 534.4,-67.2
                499.6,-102 482.6,-85 517.4,-50.3        "
/>
            <polygon class="st0" points="125.4,-304.8 108.4,-287.8 125.4,-270.9 177.2,-219.1 92.3,-134.3 109.3,-117.3 194.1,-202.1
                211.1,-219.1 228.9,-236.9 245.9,-220 212,-186 194.1,-168.2 210.3,-152.1 228.1,-134.3 212,-118.1 178,-152.1 161.1,-135.1
                195,-101.2 178,-84.2 161.1,-67.2 127.1,-33.3 143.2,-17.2 177.2,-51.1 194.1,-34.1 160.2,-0.2 177.2,16.8 211.1,-17.2
                228.1,-34.1 211.1,-51.1 194.1,-68.1 211.1,-85 262.9,-33.3 279.8,-16.3 296.8,-33.3 312.9,-49.4 329.9,-32.4 313.8,-16.3
                296.8,0.7 262.9,34.6 245.1,16.8 262,-0.2 245.9,-16.3 228.9,0.7 212,17.6 195,34.6 211.1,50.7 228.1,33.8 245.9,51.6 212,85.5
                194.1,67.7 178,51.6 110.1,-16.3 93.2,0.7 161.1,68.5 144.1,85.5 92.3,33.8 75.4,16.8 58.4,-0.2 75.4,-17.2 57.5,-35 40.6,-18
                23.6,-1 41.4,16.8 58.4,33.8 8.3,83.8 25.3,100.8 75.4,50.7 127.1,102.5 143.2,118.6 160.2,101.6 177.2,84.7 195,102.5 212,119.5
                228.9,102.5 262.9,68.5 279.8,51.6 313.8,17.6 329.9,33.8 279,84.7 262,101.6 279,118.6 338.4,178 355.4,161 296,101.6 346.9,50.7
                372.3,76.2 389.3,93.1 414.8,118.6 397.8,135.6 346.9,84.7 329.9,101.6 380.8,152.5 397.8,169.5 414.8,152.5 431.7,135.6
                448.7,152.5 465.7,135.6 448.7,118.6 483.5,83.8 500.5,100.8 516.6,84.7 499.6,67.7 516.6,50.7 499.6,33.8 482.6,50.7 466.5,66.8
                431.7,101.6 406.3,76.2 423.2,59.2 406.3,42.2 389.3,59.2 363.8,33.8 346.9,16.8 330.8,0.7 346.9,-15.5 363,0.7 380.8,18.5
                398.6,0.7 431.7,-32.4 413.9,-50.3 380.8,-17.2 364.7,-33.3 347.7,-50.3 330.8,-67.2 347.7,-84.2 380.8,-51.1 396.9,-67.2
                363.8,-100.3 381.7,-118.1 466.5,-33.3 483.5,-50.3 398.6,-135.1 381.7,-152.1 364.7,-135.1 346.9,-117.3 330.8,-101.2
                313.8,-84.2 296,-66.4 279.8,-50.3 228.1,-102 244.2,-118.1 261.2,-101.2 279,-83.3 296.8,-101.2 312.9,-117.3 330.8,-135.1
                363.8,-168.2 346,-186 312.9,-152.9 279.8,-186 262,-168.2 295.1,-135.1 279,-119 262,-136 245.9,-152.1 228.1,-169.9 262,-203.8
              .........完整代码请登录后点击上方下载按钮下载查看

网友评论0