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);
          }
          to {
            opacity: .5;
          }
        }
    </style>


</head>

<body>
    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 423 393" width="423" height="393">
  <path d="M44.5 35c1.389 4.5 2.554 6.669 1.389 8.222-1.86 2.48-3.921 4.825-5.861 7.25-2.403 3.003-3.47 6.717-5.306 10.056-2.059 3.744-3.942 7.708-4.61 11.972-.586 3.73-.612 8.056-.612 11.833 0 5.016-.263 10.088.389 15.056.265 2.02-.063 4.065.139 6.083.195 1.947 1.38 3.589 1.472 5.639.126 2.827 1.865 6.955 3.25 9.417 1.826 3.246 2.53 7.339 4.139 10.75 1.428 3.027 2.111 5.815 2.111 9.166 0 15.417-4.282 31.303-9.972 45.528-3.432 8.579-7.667 16.529-9.917 25.528-1.508 6.033-.77 13.451.278 19.5 2.528 14.605 16.008 23.94 20.722 37.611 1.142 3.313.813 7.063 1.5 10.5.747 3.735.889 8.076.889 11.889 0 4.581.54 11.127-1.75 15.25-1.261 2.27-2.51 4.806-4.25 6.75-1.263 1.411-1.515 3.386-2.972 4.722-2.646 2.425-2.176 6.6.........完整代码请登录后点击上方下载按钮下载查看