svg变换的曲线格子效果-html代码-BFW代码库

svg变换的曲线格子效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.svg-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#my-svg {
    width: 100%;
    height: 100%;
    background: black;
}
#my-svg g {
    opacity: 0;
}
#my-svg g {
    background-color: rgba(167, 36, 36, 0.5);
}
.fade-in-out {
    animation-name: fadeinout;
    animation-timing-function: linear;
}
g.fade-in-out {
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
}
@keyframes fadeinout {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
.purple { stroke: #6b5b95 }
.yellow { stroke: #feb236 }
.red { stroke: #d64161 }
.orange { stroke: #ff7b25 }
</style>

</head>
<body translate="no">

<div class="svg-container">
&.........完整代码请登录后点击上方下载按钮下载查看