鼠标点击颜色爆炸效果-html代码-BFW代码库

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0; 
  overflow: hidden;
  baackground-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.body, .body2 {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  overflow:hidden;
  cursor:pointer;
  transition:2s;
}

.boom{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:500vw;
  width:500vw;
  animation: boomba 1s linear;
  border-radius:200vw;
}

@keyframes boomba{
  0%{height:10px; width:10px;}
  100%{height:500vw; width:500vw;}
}

.bubble1,.bubble2,.bubble3,.bubble4,.bubble5,.bubble6,.bubble7,.bubble8,.bubble9{
  position:absolute;
  top:50%;
  left:50%;
  height:10vw;
  width:10vw;
  transform:translate(-50%,-50%);
  border-radius:100vw;
  opacity:0;  
}
.bubble1{
  animation:fade1 1s;
}
.bubble2{
  animation:fade2 .8s;
}
.bubble3{
  animation:fade3 .7s;
}
.bubble4{
  animation:fade4 1.1s;
}
.bubble5{
  animation:fade5 1.2s;
}
.bubble6{
  animation:fade6 1.3s;
}
.bubble7{
  animation:fade7 1.4s;
}
.bubble8{
  animation:fade8 1.5s;
}
.bubble9{
  animation:fade9 1.6s;
}

@keyframes fade1{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:10vw;
    width:10vw;
    opacity:0;
  }
}
@keyframes fade2{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:12vw;
    width:12vw;
    opacity:0;
  }
}
@keyframes fade3{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:15vw;
    width:15vw;
    opacity:0;
  }
}
@keyframes fade4{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:5vw;
    width:5vw;
    opacity:0;
  }
}
@keyframes fade5{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}
@keyframes fade6{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}
@keyframes fade7{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}
@keyframes fade8{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}
@keyframes fade9{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}



/*User prompt*/
.box {
  height: 100px;
  width: 100px;
  /*Designed to be scalable so long as this box is a perfect square*/
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity:1;
  pointer-events: none;
}
.tapperoo {
  height: 25%;
  width: 25%;
  position: absolute;
  top:30%;
  left:8%;
  border-radius: 100%;
  background-color: #0095dd;
  z-index: -1;
  opacity:0.9;
  animation: tapperoo 3s infinite;
}
@keyframes tapperoo {
  0% {
  }
  50% {
    height: 40%;
    width: 40%;
    left:2%;
  }
  100% {
  }
}

#tap-gesture{
  position:absolute;
  animation: handMove 3s infinite;
}
@keyframes handMove {
  0% {
    top:0%
  }
  50% {
    top:5%;
    transform:scale(0.95) rotateX(20deg);
  }
  100% {
    top:0%;
  }
}
</style>

</head>
<body translate="no">
<div id="body" class="body"></div>
<div id="body2" class="body2"></div>
<div class="box">
<div class="tapperoo"></div>
<svg version="1.1" id="tap-gesture" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="140.2 0 293.8 500" enable-background="new 140.2 0 293.8 500" xml:space="preserve">
<rect x="140.2" fill="rgba(255,255,255,0)" width="293.8" height="500" />
<g>

<path class="hand" fill="#4D4E53" d="M173.2,170.2l1.8,86.2c-3.3,1.8-8.3,5.1-14.7,10.9c-22.1,20-29.3,68.7-4.3,106.3
		c27.8,41.9,60.4,59.8,109,59.8c51.5,0,68.7-25.8,81.9-52.3c12.7-25.5,12.9-122.9,12.9-127.1c0-13-12.3-24.5-26.4-24.5
		c-1.7,0-5.9,0.6-10.2,1.9c-1.1-14.7-13.4-26.4-28.5-26.4c-6.8,0-13,2.4-17.9,6.3c-3.6-11-13.2-18.5-25-18.5
		c-7.8,0-14.8,3.2-19.8,8.5l-1.3-35.1l-0.6-15.9l-0.9-24.8c0-17.4-12.3-30.6-28.6-30.6S172,108,172,125.6l0.6,29.7L173.2,170.2z" />
</g>
</svg>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js">
function goBoom(event) {
  //get mouse coords
  var x = event.clientX;
  var y = event.clientY;

  //create main boom element
  document.getElementById("body").innerHTML = "<div id='boom" + x + "'></div>";

  //create boom class and add it to div
  var attClass = document.createAttribu.........完整代码请登录后点击上方下载按钮下载查看