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-1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0