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

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

代码语言：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 2p.........完整代码请登录后点击上方下载按钮下载查看