效果图如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change tab</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background-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>
<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 fill="#0095DD" d="M230.8,166.3c13.9-10,23-26.3,23-44.7c0-30.3-24.7-55-55-55s-55,24.7-55,55c0,21.1,12,39.4,29.5,48.6"/>-->
<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>
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.createAttribute("class");
attClass.value = "boom";
document.getElementById("boom" + x).setAttributeNode(attClass);
//get new random color
var r = randNum(0, 255);
var g = randNum(0, 255);
var b = randNum(0, 255);
var newColor = "rgb(" + r + "," + g + "," + b + ")";
//randomize the boom color
document.getElementById("boom" + x).style.backgroundColor = newColor;
//start the boom position at mouse click
document.getElementById("boom" + x).style.top = y + 'px';
document.getElementById("boom" + x).style.left = x + 'px';
//get a complimentary color 1
var r1 = corrected(Math.round(complimentary(r)));
var g1 = corrected(Math.round(complimentary(g)));
var b1 = corrected(Math.round(complimentary(b)));
var bubbleColor1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
//get a complimentary color 2
var r2 = corrected(Math.round(complimentary2(r)));
var g2 = corrected(Math.round(complimentary2(g)));
var b2 = corrected(Math.round(complimentary2(b)));
var bubbleColor2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
//get a complimentary color 3
var r3 = corrected(Math.round(complimentary3(r)));
var g3 = corrected(Math.round(complimentary3(g)));
var b3 = corrected(Math.round(complimentary3(b)));
var bubbleColor3 = "rgb(" + r3 + "," + g3 + "," + b3 + ")";
//get a complimentary color 4
var r4 = corrected(r + 42.5);
var g4 = corrected(r + 42.5);
var b4 = corrected(r + 42.5);
var bubbleColor4 = "rgb(" + r4 + "," + g4 + "," + b4 + ")";
//get a complimentary color 5
var r5 = corrected(r - 42.5);
var g5 = corrected(g - 42.5);
var b5 = corrected(b - 42.5);
var bubbleColor5 = "rgb(" + r5 + "," + g5 + "," + b5 + ")";
//get a complimentary color 6
var r6 = corrected(r + 85);
var g6 = corrected(r + 85);
var b6 = corrected(r + 85);
var bubbleColor6 = "rgb(" + r6 + "," + g6 + "," + b6 + ")";
//get a complimentary color 7
var r7 = corrected(r - 85);
var g7 = corrected(g - 85);
var b7 = corrected(b - 85);
var bubbleColor7 = "rgb(" + r7 + "," + g7 + "," + b7 + ")";
//get a complimentary color 8
var r8 = corrected(r + 127.5);
var g8 = corrected(r + 127.5);
var b8 = corrected(r + 127.5);
var bubbleColor8 = "rgb(" + r8 + "," + g8 + "," + b8 + ")";
//get a complimentary color 9
var r9 = corrected(r - 127.5);
var g9 = corrected(g - 127.5);
var b9 = corrected(b - 127.5);
var bubbleColor9 = "rgb(" + r9 + "," + g9 + "," + b9 + ")";
//bubbles!
//1
document.getElementById("body").innerHTML += "<div id='bubble1' class='bubble1'></div>";
//start the bubble position at mouse click
document.getElementById("bubble1").style.top = (y + randNum(-20, 20)) + 'px';
document.getElementById("bubble1").style.left = (x + randNum(-20, 20)) + 'px';
document.getElementById("bubble1").style.backgroundColor = bubbleColor1;
//2
document.getElementById("body").innerHTML += "<div id='bubble2' class='bubble2'></div>";
//start the bubble position at mouse click
document.getElementById("bubble2").style.top = (y + randNum(-25, 25)) + 'px';
document.getElementById("bubble2").style.left = (x + randNum(-25, 25)) + 'px';
document.getElementById("bubble2").style.backgroundColor = bubbleColor1;
//3
document.getElementById("body").innerHTML += "<div id='bubble3' class='bubble3'></div>";
//start the bubble position at mouse click
document.getElementById("bubble3").style.top = (y + randNum(-45, 45)) + 'px';
document.getElementById("bubble3").style.left = (x + randNum(-45, 45)) + 'px';
document.getElementById("bubble3").style.backgroundColor = bubbleColor3;
//circular numbers
var circX = randNum(-65, 65);
var circY = randNum(-65, 65);
//4
document.getElementById("body").innerHTML += "<div id='bubble4' class='bubble4'></div>";
//start the bubble position at mouse click
document.getElementById("bubble4").style.top = (y + circY) + 'px';
document.getElementById("bubble4").style.left = (x + circX) + 'px';
document.getElementById("bubble4").style.backgroundColor = bubbleColor4;
/*
//Meant to be a ring of bubbles like a firework. TODO: refactor.
//5
document.getElementById("body").innerHTML += "<div id='bubble5' class='bubble5'></div>";
//start the bubble position at mouse click
document.getElementById("bubble5").style.top = (y - circY) + 'px';
document.getElementById("bubble5").style.left = (x - circX) + 'px';
document.getElementById("bubble5").style.backgroundColor = bubbleColor5;
//6
document.getElementById("body").innerHTML += "<div id='bubble6' class='bubble6'></div>";
//start the bubble position at mouse click
document.getElementById("bubble6").style.top = (y) + 'px';
document.getElementById("bubble6").style.left = (x + circX) + 'px';
document.getElementById("bubble6").style.backgroundColor = bubbleColor6;
//7
document.getElementById("body").innerHTML += "<div id='bubble7' class='bubble7'></div>";
//start the bubble position at mouse click
document.getElementById("bubble7").style.top = (y - circY) + 'px';
document.getElementById("bubble7").style.left = (x) + 'px';
document.getElementById("bubble7").style.backgroundColor = bubbleColor7;
//8
document.getElementById("body").innerHTML += "<div id='bubble8' class='bubble8'></div>";
//start the bubble position at mouse click
document.getElementById("bubble8").style.top = (y + circY) + 'px';
document.getElementById("bubble8").style.left = (x) + 'px';
document.getElementById("bubble8").style.backgroundColor = bubbleColor8;
//9
document.getElementById("body").innerHTML += "<div id='bubble9' class='bubble9'></div>";
//start the bubble position at mouse click
document.getElementById("bubble9").style.top = (y) + 'px';
document.getElementById("bubble9").style.left = (x - circX) + 'px';
document.getElementById("bubble9").style.backgroundColor = bubbleColor9;
*/
//set background and tap circle to new color
setTimeout(function () { document.body.style.backgroundColor = newColor; document.getElementsByClassName("tapperoo")[0].style.backgroundColor = bubbleColor5; document.getElementsByClassName("hand")[0].style.fill = "rgba(0,0,0,0.9)" }, 800);
}
//random number generator
function randNum(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
document.getElementById("body").addEventListener("click", goBoom);
//complimentary colors
function complimentary(x) {
return 255 - Math.abs((x - 127.5));
}
function complimentary2(x) {
return 255 - Math.abs((x - 63.75));
}
function complimentary3(x) {
return 255 - Math.abs((x - 191.25));
}
//correct for numbers over 255 and under 0
function corrected(x) {
var val = (x * 1);
if (val > 255) {
return 255;
} else if (val < 0) {
return 0;
} else {
return Math.round(val);
}
}
//stuff to prompt the user to click
//Shows the animation if your mouse is still for 3 seconds/hides it when you move
var fadein = null;
$("html").mousemove(function () {
$(".box").stop().fadeOut(300);
if (fadein != null) {
clearTimeout(fadein);
}
fadein = setTimeout(showMe, 5000);
});
$("html").click(function () {
$(".box").stop().fadeOut(300);
if (fadein != null) {
clearTimeout(fadein);
}
fadein = setTimeout(showMe, 5000);
});
function showMe() {
$(".box").stop().fadeIn();
}
</script>
</body>
</html>