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;}
}

@keyf.........完整代码请登录后点击上方下载按钮下载查看

网友评论0