svg圣诞彩灯挂灯效果代码-html代码-BFW代码库

svg圣诞彩灯挂灯效果代码

代码语言：html

代码描述：svg圣诞彩灯挂灯效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --red: 0;
          --blue: 240;
          --green: 120;
          --orange: 30;
          --purple: 300;
          
          --sat: 81%;
          
          --on: 53%;
          --off: 23%;
        }
        
        body {
          background-color: #222;
        }
        
        .bulb { fill: hsl(0, 0%, var(--on)); }
        .bulb:nth-of-type(5n+0) { fill: hsl(var(--red), var(--sat), var(--on)); color: hsl(var(--red), var(--sat), var(--on)); }
        .bulb:nth-of-type(5n+1) { fill: hsl(var(--blue), var(--sat), var(--on)); color: hsl(var(--blue), var(--sat), var(--on)); }
        .bulb:nth-of-type(5n+2) { fill: hsl(var(--green), var(--sat), var(--on)); color: hsl(var(--green), var(--sat), var(--on)); }
        .bulb:nth-of-type(5n+3) { fill: hsl(var(--orange), var(--sat), var(--on)); color: hsl(var(--orange), var(--sat), var(--on)); }
        .bulb:nth-of-type(5n+4) { fill: hsl(var(--purple), var(--sat), var(--on)); color: hsl(var(--purple), var(--sat), var(--on)); }
        
        .bulb {
          animation: blink 1s ease-in-out infinite;
        }
        .bulb:nth-of-type(2n) {
          animation-delay: .5s;
        }
        
        @keyframes blink {
          from {
            opacity: 1;
            filter: drop-shadow(0 0 8px currentColor);
          }
.........完整代码请登录后点击上方下载按钮下载查看