css+svg实现鼠标悬浮放电闪电按钮效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css+svg实现鼠标悬浮放电闪电按钮效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      background-color: rgb(5, 27, 37);
      transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    .buttonHolder{
      position: relative;
    }

    @keyframes dash {
    to {
    stroke-dashoffset: 0;
    }
    }

    .electric{
      padding: 20px 50px;
      border-radius: 100px;
      cursor: pointer;
      background-color: rgba(106, 123, 252, 0.13);
      border: 2px solid rgb(125, 140, 255);
      color: white;
      position: relative;
      filter: blur(0px);
    }
    
    #electric2{
      position: absolute;
      top: 0;
      left: 0;
      filter: blur(1px);
      background-color: rgba(106, 123, 252, 0.414);
      border: 2px solid rgb(125, 140, 255);
      color:  rgb(182, 191, 255);
      /* display: none; */
      z-index: -1;
    }
   

    svg{
      position: absolute;
    }
    .yellow{
      width: 110%;
      offset-path: 20%;
      stroke-dasharray: 300;
      stroke-dashoffset: 1000;
      animation: dash 1s linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;


    }

    .blue{
      width: 110%;
      offset-path: 20%;
      stroke-dasharray: 400;
      stroke-dashoffset: 1000;
      animation: dash 1.2s linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;

     
    }

    #y1{
      top: -115%;
      left: -5%;
      filter: blur(.5px);

    }

    #y2{
      width: 120%;
      left: -10%;
      top: -155%;
      filter: brightness(1);
    }

    #b1{
      left: -5%;
      top: -125%;
      /* filter: blur(.5px) */
    }

    #b2{
      left: -10%;
      top: -165%;
      width: 120%
      /* filter: blur(.5px) */
    }

    @keyframes dot1 {
      from{
        bottom: 0%;
        left: 10%;
        opacity: 1;
      }
      to{
        bottom: -30%;
        left: 0%;
        opacity: 0;
      }
    }
    @keyframes dot2 {
      from{
        top: 0%;
        left: 30%;
        opacity: 1;
      }
      to{
        top: -30%;
        left: 40%;
        opacity: 0;
      }
    }

    @keyframes dot3 {
      from{
        top: 0%;
        left: 80%;
        opacity: 1;
      }
      to{
        top: -30%;
        left: 80%;
        opacity: 0;
      }
    }
    @keyframes dot4 {
      from{
        bottom: 20%;
        left: 100%;
        opacity: 1;
      }
      to{
        bottom: 30%;
        left: 120%;
        opacity: 0;
      }
    }

    .part{
      content: ' ';
      width: 3px;
      height: 3px;
      border-radius: 5px;
      background-color: rgb(183, 226, 255);
      z-index: 2;
      position: absolute;
      filter: blur(1px);
      display: none;
    }

    #part1{
      animation: dot1;
      transform-origin: center;
      animation-duration: 1.5s;
      animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-iteration-count: infinite;
    }
    #part2{
      animation: dot2;
      transform-origin: center;
      animation-duration: 1.6s;
      animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-iteration-count: infinite;
    }
    #part3{
      animation: dot3;
      transform-origin: center;
      animation-duration: 1.5s;
      animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-iteration-count: infinite;
    }

    #part4{
      animation: dot4;
      transform-origin: center;
      animation-duration: 1.5s;
      animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-iteration-count: infinite;
    }

    .buttonHolder{
      width: max-content;
      max-height: 20px;
    }

    .hide{
      opacity: 0;
    }
    .buttonHolder:hover  .hide{
      opacity: 1;
    }

    .buttonHolder:hover .part{
      display: flex;
    }
</style>




</head>

  <body>

<div class="buttonHolder">

  <button class="electric" id="electric">

    <span class="part hide" id="part1"></span>
    <span class="part hide" id="part2"></span>
    <span class="part hide" id="part3"></span>
    <span class="part hide" id="part4"></span>

    <!-- yellow -->
         <svg id="y1" class="yellow hide" width="415" height="181" viewBox="0 0 415 181" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M27.2509 30.3446C34.4233 30.3446 37.3438 25.435 43.3741 22.8959C47.3062 21.2403 52.2153 27.6639 54.83 25.6303C56.9648 23.9698 58.295 21.7324 60.8173 20.5859C63.459 19.3851 66.1655 19.7541 68.8317 18.0401C71.5298 16.3056 72.3864 15.9187 75.6204 15.9187C78.8593 15.9187 79.6923 12.6752 82.4091 12.5243C85.3838 12.359 92.3568 11.0685 92.5921 15.0701C92.7642 17.9956 101.291 10.585 102.304 10.8743C106.778 12.1527 106.809 15.9187 112.11 15.9187C113.757 15.9187 116.514 15.711 117.39 14.2215C118.771 11.8735 121.049 10.7436 122.764 12.9486C123.841 14.333 126.016 19.2187 127.856 19.2187C130.8 19.2187 138.052 17.8915 140.066 15.5415C141.24 14.1714 142.391 11.7347 143.979 10.8271C147.072 9.05946 155.518 7.6863 158.782 9.31852C163.215 11.535 162.473 16.9003 168.305 14.8815C170.735 14.0403 172.344 13.4197 174.245 11.8643C176.398 10.1025 180.448 10.2496 182.967 9.12995C187.409 7.15573 194.614 5.56151 198.241 10.0257C199.539 11.6227 201.342 17.9748 203.333 18.4173C207.202 19.277 210.65 16.8454 213.28 14.4101C215.31 12.531 217.801 11.2096 219.88 9.12995C222.093 6.91741 223.404 4.88701 226.669 4.88701C233.632 4.88701 239.504 8.01076 244.018 12.5243C249.239 17.7455 257.919 19.1044 264.667 21.1988C267.318 22.0216 267.605 20.9462 270.136 19.973C273.084 18.8389 276.253 15.6813 278.433 13.3729C281.053 10.5986 282.971 10.8271 286.919 10.8271C289.114 10.8271 291.325 10.7488 293.519 10.8271C295.248 10.8889 296.621 12.43 298.28 12.43C298.946 12.43 300.935 8.2198 301.533 7.62135C303.486 5.66847 306.398 3.73346 309.029 2.81269C315.686 0.482727 323.507 1.61888 326.142 8.46994C327.751 12.653 329.489 17.0584 334.44 16.7672C335.775 16.6887 336.094 12.8361 337.174 11.8643C338.455 10.7111 342.417 11.8095 343.303 12.9486C344.524 14.5193 344.426 18.1374 345.896 19.313C348.421 21.3335 351.198 17.7283 353.109 15.9187C356.378 12.8208 362.423 14.8331 364.989 18.0401C365.87 19.1419 368.347 20.4283 369.656 21.0102C371.46 21.8119 370.534 23.791 371.306 25.2531C372.498 27.512 375.893 29.5686 378.095 30.7218C382.872 33.2244 386.659 32.8904 392.144 32.8904C393.463 32.8904 397.165 32.1732 397.235 33.9276C397.351 36.8282 397.599 40.1991 397.188 43.0735C396.801 45.7854 394.689 47.6716 394.689 50.7107C394.689 53.5394 394.689 56.368 394.689 59.1966C394.689 65.7982 404.284 67.983 408.455 71.7369C411.926 74.8608 413.358 77.6202 413.358 82.5799C413.358 89.0091 412.072 94.179 409.115 99.9288C407.279 103.499 404.859 110.16 401.148 111.809C398.231 113.106 400.399 119.131 400.582 121.144C400.962 125.325 400.629 129.672 400.629 133.872C400.629 138.772 396.335 143.468 392.144 145.564C388.874 147.199 383.667 145.169 380.075 146.413C374.032 148.504 368.264 157.965 365.46 163.573C363.056 168.382 360.941 170.513 355.183 169.466C352.96 169.062 351.457 167.496 349.29 167.014C347.045 166.516 344.363 167.088 342.077 166.967C340.027 166.859 338.269 165.27 336.137 165.27C332.535 165.27 329.396 167.9 325.954 168.664C318.538 170.312 311.971 170.362 304.362 170.362C299.213 170.362 293.637 169.875 289.276 166.967C287.217 165.595 285.094 163.106 282.676 165.27C278.216 169.261 270.451 174.605 264.431 174.605C259.712 174.605 255.33 174.531 250.807 173.709C247.112 173.037 245.209 170.362 241.472 170.362C234.558 170.362 227.643 170.362 220.729 170.362C214.455 170.362 210.739 175.453 204.606 175.453C199.332 175.453 197.686 170.481.........完整代码请登录后点击上方下载按钮下载查看