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 1.175 4.082 8.758 3.513 9.644-.81Z" class="bulb"/>
  <path d="M134.326 21.232c-.341 4.4 5.538 11.813 5.538 11.813s1.737 1.866 2.976-.63c1.15-3.124 2.175-10.337.955-13.184-1.673-3.905-9.127-2.399-9.469 2.001Z" class="bulb"/>
  <path d="M212.56 18.672c.286-4.404-5.686-11.741-5.686-11.741s-1.76-1.845-2.968.666c-1.11 3.138-2.045 10.365-.789 13.196 1.722 3.883 9.157 2.283 9.443-2.12Z" class="bulb"/>
  <path d="M257.31 14.913c-1.463 4.164 2.31 12.84 2.31 12.84s1.198 2.25 3.038.158c1.915-2.723 4.763-9.43 4.317-12.495-.612-4.203-8.202-4.667-9.665-.503Z" class="bulb"/>
  <path d="M312.019 12.203c-.874-4.326-8.554-9.85-8.554-9.85s-2.181-1.32-2.691 1.418c-.253 3.32.731 10.54 2.683 12.944 2.676 3.299 9.435-.186 8.562-4.512Z" class="bulb"/>
  <path d="M344.689 15.589c-.341 4.4 5.538 11.812 5.538 11.812s1.737 1.866 2.976-.63c1.15-3.123 2.175-10.337.955-13.184-1.673-3.904-9.127-2.398-9.469 2.002Z" class="bulb"/>
  <path d="M397.16 16.06c4.121-1.578 8.298-10.067 8.298-10.067s.941-2.37-1.845-2.419c-3.315.3-10.272 2.466-12.321 4.79-2.81 3.185 1.746 9.273 5.868 7.696Z" class="bulb"/>
  <path d="M380.716 53.223c-2.35-3.736-11.49-6.178-11.49-6.178s-2.507-.462-2.013 2.28c.94 3.193 4.42 9.595 7.097 11.152 3.672 2.136 8.757-3.52 6.406-7.254Z" class="bulb"/>
  <path d="M382.783 112.121c4.413.046 11.414-6.317 11.414-6.317s1.746-1.859-.827-2.927c-3.194-.938-10.46-1.478-13.219-.069-3.783 1.931-1.781 9.267 2.632 9.313Z" class="bulb"/>
  <path d="M384.807 149.513c-4.081 1.68-8.044 10.271-8.044 10.271s-.882 2.393 1.904 2.372c3.307-.383 10.208-2.722 12.198-5.095 2.729-3.255-1.978-9.228-6.058-7.548Z" class="bulb"/>
  <path d="M405.991 190.748c3.378 2.84 12.827 2.378 12.827 2.378s2.529-.325 1.222-2.786c-1.87-2.754-7.137-7.789-10.162-8.455-4.148-.913-7.265 6.023-3.887 8.863Z" class="bulb"/>
  <path d="M373.767 220.512c-4.262-1.145-9.29-9.159-9.29-9.159s-1.18-2.26 1.586-2.596c3.328-.043 10.471 1.396 12.748 3.496 3.123 2.879-.782 9.404-5.044 8.259Z" class="bulb"/>
  <path d="M384.999 260.686c4.359-.689 10.203-8.129 10.203-8.129s1.412-2.123-1.303-2.749c-3.306-.393-10.561.285-13.046 2.134-3.409 2.534-.213 9.434 4.146 8.744Z" class="bulb"/>
  <path d="M381.282 288.........完整代码请登录后点击上方下载按钮下载查看