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 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;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(10) {
animation: particles-10 1.5s 0.25s;
}
@keyframes particles-11 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: 74px;
top: 46px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(11) {
animation: particles-11 1.5s 0.275s;
}
@keyframes particles-12 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: 178px;
top: 1px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(12) {
animation: particles-12 1.5s 0.3s;
}
@keyframes particles-13 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: -208px;
top: -157px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(13) {
animation: particles-13 1.5s 0.325s;
}
@keyframes particles-14 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: -159px;
top: -212px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(14) {
animation: particles-14 1.5s 0.35s;
}
@keyframes particles-15 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: -176px;
top: -162px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(15) {
animation: particles-15 1.5s 0.375s;
}
@keyframes particles-16 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: 105px;
top: 189px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(16) {
animation: particles-16 1.5s 0.4s;
}
@keyframes particles-17 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: -95px;
top: 19px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(17) {
animation: particles-17 1.5s 0.425s;
}
@keyframes particles-18 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: -12px;
top: -207px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(18) {
animation: particles-18 1.5s 0.45s;
}
@keyframes particles-19 {
from {
transform: scale(1);
visibility: visible;
}
to {
left: 27px;
top: -139px;
transform: scale(0);
visibility: hidden;
}
}
.active .hero-btn .particles-circle:nth-of-type(19) {
animation: particles-19 1.5s 0.475s;
}
@keyframes particles-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0