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

svg多彩换色菱形背景效果

代码语言：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=&qu.........完整代码请登录后点击上方下载按钮下载查看