svg多彩换色菱形背景效果-html代码-BFW代码库

代码语言：html

所属分类：背景

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


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

<style>
.txt-center{
     text-align: center;
 }

body{
    height: fit-content;
    font-family: 'Poppins',sans-serif;
    background-repeat: no-repeat;
    background-size: cover;
}

.cls-3{
    animation: blink1 1s ease-in-out alternate-reverse infinite;
}

.cls-4{
    animation: blink2 1.3s ease-in-out alternate-reverse infinite;
}

.cls-5{
    animation: blink3 1.6s ease-in-out alternate-reverse infinite;
}

.cls-6{
    animation: blink4 1.9s ease-in-out alternate-reverse infinite;
}

.cls-7{
    animation: blink5 1.1s ease-in-out alternate-reverse infinite;
}

.cls-8{
    animation: blink6 1.4s ease-in-out alternate-reverse infinite;
}

.cls-9{
    animation: blink7 1.2s ease-in-out alternate-reverse infinite;
}

.cls-10{
    animation: blink8 1.8s ease-in-out alternate-reverse infinite;
}


@keyframes blink1{
    0%{fill: #f8bbff;}
    50%{fill: rgba(255, 78, 180, 0.54);}
    100%{fill:#ff4eb4;}
}

@keyframes blink2{
    0%{fill: #ead0ff;}
    50%{fill: rgba(237, 157, 255, 0.61);}
    100%{fill: #ed9dff;}
}

@keyframes blink3{
    0%{fill: #fbdefc;}
    50%{fill: rgba(252, 174, 243, 0.58);}
    100%{fill: #fcaef3;}
}

@keyframes blink4{
    0%{fill: #f9ccca;}
    50%{fill: rgba(249, 129, 149, 0.67);}
    100%{fill: #f98195;}
}

@keyframes blink5{
    0%{fill: #dfcaff;}
    50%{fill: rgba(212, 149, 255, 0.62);}
    100%{fill: #d495ff;}
}

@keyframes blink6{
    0%{fill: #d4ecff;}
    50%{fill: rgba(145, 210, 255, 0.72);}
    100%{fill: #91d2ff;}
}

@keyframes blink7{
    0%{fill: #fce3e3;}
    50%{fill: rgba(252, 132, 197, 0.65);}
    100%{fill: #fc84c5;}
}

@keyframes blink8{
    0%{fill: #e1f0f9;}
    50%{fill: rgba(137, 176, 249, 0.63);}
    100%{fill: #89b0f9;}
}
</style>

</head>
<body translate="no">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="80 120 1350 750"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#f8bbff;}.cls-10,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#fff;stroke-miterlimit:10;stroke-width:10px;}.cls-4{fill:#ead0ff;}.cls-5{fill:#fbdefc;}.cls-6{fill:#f9ccca;}.cls-7{fill:#dfcaff;}.cls-8{fill:#d4ecff;}.cls-9{fill:#fce3e3;}.cls-10{fill:#e1f0f9;}</style><clipPath id="clip-path" transform="translate(77.63 114.62)"><rect class="cls-1" width="1366" height="768" /></clipPath></defs><title>Untitled-2</title><g class="cls-2"><polygon class="cls-3" points="165.63 120.62 245.63 227.62 165.63 334.62 85.62 227.62 165.63 120.62" /><polygon class="cls-3" points="166.13 335.12 246.13 442.12 166.13 549.12 86.12 442.12 166.13 335.12" /><polygon class="cls-4" points="165.88 547.87 245.88 654.87 165.88 761.87 85.87 654.87 165.88 547.87" /><polygon class="cls-4" points="165.38 762.37 245.38 869.37 165.38 976.37 85.37 869.37 165.38 762.37" /><polygon class="cls-4" points="244.63 14.62 324.63 121.62 244.63 228.62 164.62 121.62 244.63 14.62" /><polygon class="cls-4" points="245.13 229.12 325.13 336.12 245.13 443.12 165.12 336.12 245.13 229.12" /><polygon class="cls-5" points="244.88 441.87 324.88 548.87 244.88 655.87 164.87 548.87 244.88 441.87" /><polygon class="cls-6" points="244.38 656.37 324.38 763.37 244.38 870.37 164.37 763.37 244.38 656.37" /><polygon class="cls-4" points="325.63 120.62 405.63 227.62 325.63 334.62 245.62 227.62 325.63 120.62" /><polygon class="cls-4" points="326.13 335.12 406.13 442.12 326.13 549.12 246.12 442.12 326.13 335.12" /><polygon class="cls-7" points="325.88 547.87 405.88 654.87 325.88 761.87 245.87 654.87 325.88 547.87" /><polygon class="cls-6" points="325.38 762.37 405.38 869.37 325.38 976.37 245.37 869.37 325.38 762.37" /><polygon class="cls-4" points="406.64 14.17 486.65 121.17 406.64 228.17 326.64 121.17 406.64 14.17" /><polygon class="cls-6" points="407.14 228.67 487.15 335.67 407.14 442.67 327.14 335.67 407.14 228.67" /><polygon class="cls-7" points="406.89 441.42 486.9 548.42 406.89 655.42 326.89 548.42 406.89 441.42" /><polygon class="cls-4" points="406.39 655.92 486.4 762.92 406.39 869.92 326.39 762.92 406.39 655.92" /><polygon class="cls-6" points="487.5 120.24 567.51 227.24 487.5 334.24 407.49 227.24 487.5 120.24" /><polygon class="cls-7" points="488 334.74 568.01 441.74 488 548.74 407.99 441.74 488 334.74" /><polygon class="cls-7" points="487.75 547.49 567.76 654.49 487.75 761.49 407.74 654.49 487.75 547.49" /><polygon class="cls-4" points="487.25 761.99 567.26 868.99 487.25 975.99 407.24 868.99 487.25 761.99" /><polygon class="cls-4" points="568.5 14.53 648.51 121.53 568.5 228.53 488.49 121.53 568.5 14.53" /><polygon class="cls-4" points="569 229.03 649.01 336.03 569 443.03 488.99 336.03 569 229.03" /><polygon class="cls-8" points="568.75 441.78 648.76 548.78 568.75 655.78 488.74 548.78 568.75 441.78" /><polygon class="cls-8" points="568.25 656.28 648.26 763.28 568.25 870.28 488.24 763.28 568.25 656.28" /><polygon class="cls-9" points="650.93 120.67 730.94 227.67 650.93 334.67 570.92 227.67 650.93 120.67" /><polygon class="cls-4" points="651.43 335.17 731.44 442.17 65.........完整代码请登录后点击上方下载按钮下载查看