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

代码语言：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.692-3.278 9.778-1.078 3.019-2.458 6.475-4 9.25-1.078 1.941-.75 4.205-.75 6.361 0 4.968.18 10.965 3 15.278 2.623 4.012 8.676 6.445 12.889 8.111 5.53 2.186 12.205 3 18.111 3 3.07 0 6.16-.843 9.222-1 3.165-.162 7.252-.796 10.306-1.75 3.623-1.132 7.447-1.13 10.972-2.75 2.69-1.236 5.57-1.996 8.25-3.278 10.271-4.912 21.796-8.679 33.278-6 6.19 1.444 12.064 5.274 18.194 7.278 4.506 1.473 9.581 2.255 14.222 3.25 5.353 1.147 10.502 3.261 15.945 4.139 11.969 1.93 24.16 3.111 36.278 3.111H234.5c3.827 0 6.373-1.202 9.889-2.389 4.305-1.454 8.351-3.293 12.722-4.611 3.376-1.018 6.847-3.734 10.417-3.972 6.829-.456 15.321-.934 21.944.722 6.245 1.561 13.369 1.876 19.778 2.222 9.132.494 18.236.021 27.278 1.528 5.815.969 10.577.5 16.25.5 8.547 0 16.339-2.085 24.389-4.5 9.449-2.835 21.095-7.771 23.583-18.222.678-2.85.25-6.132.25-9.056 0-3.556.637-7.762-.111-11.222-.894-4.134-1.546-8.14-2.611-12.25-1.234-4.76-2.353-10.85-5.278-14.861-3.201-4.39-4.976-10.562-6.778-15.639-1.91-5.384-4.612-10.595-6.833-15.861-3.253-7.71-4.301-17.562-2.5-25.889 1.693-7.831 2.377-14.905 7.139-21.75 4.671-6.715 8.614-13.957 12.972-20.806 3.069-4.822 6-11.187 6-16.944 0-5.932-1.335-11.161-3.75-16.528-3.761-8.358-9.19-16.324-14.75-23.583-3.185-4.158-4.613-8.604-6.278-13.361-1.12-3.2-1.237-6.138-1.833-9.417-.709-3.899-1.889-7.569-1.889-11.555 0-4.054-.068-8.114 0-12.167.06-3.609.569-7.514 1.278-11.056.902-4.508 1.458-9.172 3.222-13.444 2.566-6.213 7.033-11.214 9.722-17.361C390.755 46.38 394 41.656 394 36.5c0-6.304.755-13.286-3.778-18.25-1.594-1.746-3.042-4.992-5.333-5.861-2.163-.82-4.158-2.111-6.445-2.611-2.362-.517-4.846-.447-7.194-1.056-3.881-1.006-7.062-1.222-11.056-1.222-8.883 0-17.882.89-26.694 2-14.633 1.844-16.034 10.541-30.5 13.5-8.601 1.76-19.5-10.611-38-13.222-20.5-2.278-26.5 3.11-32 5.222-9 6-13.871 9.288-18.5 10.111-18.075 3.213-14.119 2.507-32.444 1.361-7.298-.456-14.536-2.313-21.778-3.472-9.933-1.59-15.406-12.934-24.278-9.5-15.5 6-18.673 9.818-25.5 11-7.574 1.31-11.5 1.972-20 1.972C77 25.112 79.5 28.5 67 17c-6.5-3.5-9.667-6.5-15.389 2.5C45.89 28.5 44.5 33.028 44.5 35Zm0 0c.927-.795 0 1.972 0 0Z" stroke="#000" stroke-width="4" stroke-linecap="round"/>
  <path d="M54.118 22.467c.352 4.4 7.319 10.8 7.319 10.8s2.008 1.571 2.84-1.088c.647-3.265.53-10.55-1.12-13.171-2.264-3.594-9.39-.94-9.039 3.46Z" class="bulb"/>

  <path d="M102.882 18.645c.885-4.324-4.029-12.409-4.029-12.409s-1.492-2.067-3.03.255c-1.53 2.957-3.443 9.988-2.585 12.964 .........完整代码请登录后点击上方下载按钮下载查看