js实现按钮喷射爱心万花筒粒子动画效果代码-html代码-BFW代码库

js实现按钮喷射爱心万花筒粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现按钮喷射爱心万花筒粒子动画效果代码，点击按钮试试

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FBF8F1;
  font-family: 'Pacifico', serif;
  overflow: hidden;
}

span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

span::after {
  content: attr(data-text);
  position: absolute;
  background-color: #FC4F4F;
  border-radius: 10px;
  padding: 6px 20px;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
  user-select: none;
  box-shadow: 0 7px 15px -1px #ccc;
  transition: transform 100ms ease-in;
}

span:active::after { transform: scale(0.9); }

.pumping::after {
  animation: pumping 100ms ease-in-out infinite;
}

@keyframes pumping {
  50% { transform: scale(0.95); }
}

.shape {
  --size: 8px;
  position: absolute;
  top: calc(50% - var(--size));
  left: calc(50% - var(--size));
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  animation: popup var(--d) cubic-bezier(.08,.56,.53,.98) forwards;
}

.square {
  border-radius: 4px;
  background-color: var(--c);
}

.circle {
  border-radius: 50%;
  background-color: var(--c);
}

.triangle {
  width: 0px;
  height: 0px;
  background-color: none;
  border-top: var(--size) solid transparent;
  border-bottom: calc(var(--size) * 2) solid var(--c);
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
}

.heart {
  --size: 6px;
  background-color: var(--c);
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--c);
  border-radius: 50%;
}
.heart::before { left: -50%; }
.heart::after { top: -50%; }

@keyframes popup {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r));
  }
}
</style>




</head>

<body >
  <span class="pumping" data-text="Click Me"></span>
 
      <script >
const colors = ['#FC4F4F', '#FFBC80', '#FF9F45'.........完整代码请登录后点击上方下载按钮下载查看