css+js按钮点击冒泡粒子动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+js按钮点击冒泡粒子动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import url("https://fonts.googleapis.com/css?family=Montserrat:400, 600");
        .hero-btn {
          position: relative;
          width: 200px;
          margin: auto;
          height: 66px;
        }
        .hero-btn .btn {
          background-color: #ff0083;
          border: none;
          outline: none;
          text-decoration: none;
          text-transform: uppercase;
          color: #fff;
          display: inline-block;
          width: 200px;
          height: 66px;
          text-align: center;
          line-height: 66px;
          font-size: 22px;
          font-family: "Montserrat", sans-serif;
          font-weight: 600;
          letter-spacing: 2px;
          -moz-border-radius: 6px;
          -webkit-border-radius: 6px;
          border-radius: 6px;
          white-space: nowrap;
          text-overflow: ellipsis;
          -moz-user-select: -moz-none;
          -ms-user-select: none;
          -webkit-user-select: none;
          user-select: none;
          -moz-appearance: none;
          cursor: pointer;
          -webkit-appearance: none;
          -moz-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
          -webkit-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
          box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
          -moz-transform: perspective(600px) rotateX(0deg) scale(1);
          -ms-transform: perspective(600px) rotateX(0deg) scale(1);
          -webkit-transform: perspective(600px) rotateX(0deg) scale(1);
          transform: perspective(600px) rotateX(0deg) scale(1);
          -moz-transition: all 0.2s linear;
          -o-transition: all 0.2s linear;
          -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
        }
        .hero-btn .btn:hover {
          background-color: #e60076;
          -moz-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
          -webkit-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
          box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
        }
        .hero-btn .btn:active {
          -moz-transform: perspective(600px) rotateX(15deg) scale(0.9);
          -ms-transform: perspective(600px) rotateX(15deg) scale(0.9);
          -webkit-transform: perspective(600px) rotateX(15deg) scale(0.9);
          transform: perspective(600px) rotateX(15deg) scale(0.9);
          font-size: 21px;
          -moz-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
          -webkit-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
          box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
        }
        .active .hero-btn .btn:active {
          -moz-transform: perspective(600px) rotateX(0deg) scale(1);
          -ms-transform: perspective(600px) rotateX(0deg) scale(1);
          -webkit-transform: perspective(600px) rotateX(0deg) scale(1);
          transform: perspective(600px) rotateX(0deg) scale(1);
          font-size: 22px;
          -moz-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
          -webkit-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
          box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
        }
        .hero-btn .particles-circle {
          position: absolute;
          background-color: #ff0083;
          width: 30px;
          height: 30px;
          top: 10px;
          left: 50%;
          margin-left: -15px;
          z-index: -1;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          -moz-transform: scale(0);
          -ms-transform: scale(0);
          -webkit-transform: scale(0);
          transform: scale(0);
          visibility: hidden;
        }
        .hero-btn .particles-circle:nth-of-type(odd) {
          border: solid 2px #ff0083;
          background-color: transparent;
        }
        @keyframes particles-1 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: 161px;
            top: -24px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(1) {
          animation: particles-1 1.5s 0.025s;
        }
        @keyframes particles-2 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: -49px;
            top: -2px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(2) {
          animation: particles-2 1.5s 0.05s;
        }
        @keyframes particles-3 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: -136px;
            top: 96px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(3) {
          animation: particles-3 1.5s 0.075s;
        }
        @keyframes particles-4 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: -239px;
            top: -34px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(4) {
          animation: particles-4 1.5s 0.1s;
        }
        @keyframes particles-5 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: -184px;
            top: -94px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(5) {
          animation: particles-5 1.5s 0.125s;
        }
        @keyframes particles-6 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: 94px;
            top: 116px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(6) {
          animation: particles-6 1.5s 0.15s;
        }
        @keyframes particles-7 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: -72px;
            top: -69px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(7) {
          animation: particles-7 1.5s 0.175s;
        }
        @keyframes particles-8 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: 62px;
            top: 12px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(8) {
          animation: particles-8 1.5s 0.2s;
        }
        @keyframes particles-9 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: 11px;
            top: -55px;
            transform: scale(0);
            visibility: hidden;
          }
        }
        .active .hero-btn .particles-circle:nth-of-type(9) {
          animation: particles-9 1.5s 0.225s;
        }
        @keyframes particles-10 {
          from {
            transform: scale(1);
            visibility: visible;
          }
          to {
            left: -12px;
            top: 228px;
    .........完整代码请登录后点击上方下载按钮下载查看