<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>别捅马蜂窝</title>
<style>
body {
display: flex;
justify-content: center;
margin: 0;
height: 100vh;
background-color: #f5fccd;
overflow: hidden;
cursor: none;
}
.hive-line {
position: absolute;
width: 0.2rem;
height: 3rem;
background-color: #12486b;
box-shadow: 2rem -0.5rem 1rem 0 rgba(0, 0, 56, 0.5);
}
.hive-line--provoked {
transform-origin: 50% -2rem;
animation: swing;
animation-duration: 1s;
animation-iteration-count: 2;
}
@keyframes swing {
0%,
100% {
transform: rotate(0deg);
}
33.33% {
transform: rotate(-10deg);
}
66.66% {
transform: rotate(10deg);
}
}
.hive-text {
position: absolute;
top: 1rem;
left: calc(50vw - 8rem);
width: 5rem;
font-family: 'Archivo Black', sans-serif;
color: #12486b;
}
.hive-text:before {
content: '';
position: absolute;
bottom: -2rem;
left: 3rem;
width: 0.2rem;
height: 2rem;
background-color: #12486b;
transform: rotate(-45deg);
}
.hive {
position: relative;
width: 8rem;
height: 10rem;
margin-top: 3rem;
border-radius: 50%;
background: radial-gradient(circle at 0 0, #fff -20%, orange);
overflow: hidden;
box-shadow: 2rem 1rem 2rem 0 rgba(0, 0, 56, 0.5);
}
.hive--provoked {
transform-origin: 50% -4rem;
animation: swing;
animation-duration: 1s;
animation-iteration-count: 2;
}
@keyframes swing {
0%,
100% {
transform: rotate(0deg);
}
33.33% {
transform: rotate(-10deg);
}
66.66% {
transform: rotate(10deg);
}
}
.hive__division {
position: absolute;
width: 100%;
height: 0.2rem;
background: linear-gradient(90deg, #ff7d66, #000038 300%);
}
.hive__division:nth-child(1) {
top: 10%;
}
.hive__division:nth-child(2) {
top: 30%;
}
.hive__division:nth-child(3) {
top: 50%;
}
.hive__division:nth-child(4) {
top: 70%;
}
.hive__division:nth-child(5) {
top: 90%;
}
.hive__door {
position: absolute;
left: 2.5rem;
bottom: 2rem;
width: 3rem;
height: 3rem;
border-top: 0.3rem solid #ff7d66;
border-radius: 50%;
background: linear-gradient(#12486b -100%, #000038);
}
.bee {
position: absolute;
top: 9rem;
left: calc(50vw - 0.4rem);
width: 0.8rem;
height: 0.5rem;
border-radius: 50%;
background: linear-gradient(
90deg,
orange,
orange 20%,
#000038 20%,
#000038 40%,
orange 40%,
orange 60%,
#000038 60%,
#000038 80%,
orange 80%
);
box-shadow: 2rem 1rem 1rem 0 rgba(0, 0, 56, 0.6);
transition-property: top, left;
transition-duration: 0.5s;
animation: flying;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.bee:before,
.bee:after {
content: '';
position: absolute;
top: -0.3rem;
width: 0.3rem;
height: 0.3rem;
background: rgba(255, 255, 255, 0.6);
}
.bee:before {
left: 0;
border-radius: 0 0.2rem 0 0.2rem;
}
.bee:after {
left: 0.3rem;
border-radius: 0.2rem 0 0.2rem 0;
}
@keyframes flying {
0% {
top: 9rem;
left: calc(50vw - 0.4rem);
opacity: 0;
}
5% {
opacity: 1;
}
10%,
70% {
top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
left: calc(var(--left) + 1rem);
}
15%,
75% {
top: min(calc(var(--top) + 3rem), calc(80vh - 1rem));
left: calc(var(--left) - 0.5rem);
}
20%,
50% {
top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
left: calc(var(--left) - 1.5rem);
}
30%,
60% {
top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
left: calc(var(--left) + 0.5rem);
}
40%,
80% {
top: min(var(--top), calc(80vh - 1rem));
left: calc(var(--left) - 2.5rem);
}
35%,
95% {
top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem));
left: calc(var(--left) - 3rem);
}
50%,
90% {
top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
left: calc(var(--left) + 0.5rem);
}
100% {
top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
left: calc(var(--left) + 1.5rem);
}
}
.bee:nth-child(4n) {
animation: flying2;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes flying2 {
0% {
top: 9rem;
left: calc(50vw - 0.4rem);
opacity: 0;
}
5% {
opacity: 1;
}
20%,
90% {
top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
left: calc(var(--left) + 5rem);
}
15%,
75% {
top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
left: calc(var(--left) - 6rem);
}
30%,
80% {
top: min(calc(var(--top) + 4rem), calc(80vh - 1rem));
left: calc(var(--left) - 1.5rem);
}
25%,
65% {
top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
left: calc(var(--left) + 5rem);
}
90%,
80% {
top: min(calc(var(--top) + 4rem), calc(80vh - 1rem));
left: calc(var(--left) - 3.5rem);
}
35%,
95% {
top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem));
left: calc(var(--left) - 3rem);
}
50%,
40% {
top: min(calc(var(--top) - 5rem), calc(80vh - 1rem));
left: calc(var(--left) + 0.5rem);
}
100% {
top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
left: calc(var(--left) + 1.5rem);
}
}
.bee:nth-child(4n + 1) {
animation: flying3;
animation-duration: 20s;
animation-iteration-count: infinite;
}
@keyframes flying3 {
0% {
top: 9rem;
left: calc(50vw - 0.4rem);
opacity: 0;
}
5% {
opacity: 1;
}
15%,
90% {
top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
left: calc(var(--left) + 5rem);
}
15%,
75% {
top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
left: calc(var(--left) - 8rem);
}
30%,
80% {
top: min(calc(var(--top) + 2rem), calc(80vh - 1rem));
left: calc(var(--left) + 5rem);
}
25%,
65% {
top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
left: calc(var(--left) + 8rem);
}
35%,
80% {
top: min(calc(var(--top) + 8rem), calc(80vh - 1rem));
left: calc(var(--left) - 8rem);
}
50%,
95% {
top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
left: calc(var(--left) - 3rem);
}
90%,
40% {
top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
left: calc(var(--left) + 5rem);
}
100% {
top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
left: calc(var(--left) - 8rem);
}
}
.bee:nth-child(4n + 2) {
animation: flying4;
animation-duration: 15s;
animation-iteration-count: infinite;
}
@keyframes flying4 {
0% {
top: 9rem;
left: calc(50vw - 0.4rem);
opacity: 0;
}
5% {
opacity: 1;
}
15%,
90% {
top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
left: calc(var(--left) + 2rem);
}
15%,
75% {
top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
left: calc(var(--left) + 4rem);
}
30%,
80% {
top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
left: calc(var(--left) - 2rem);
}
25%,
65% {
top: min(calc(var(--top) + 2rem), calc(80vh - 1rem));
left: calc(var(--left) - 6rem);
}
35%,
80% {
top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
left: calc(var(--left) + 6rem);
}
50%,
95% {
top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
left: calc(var(--left) - 3rem);
}
90%,
40% {
top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
left: calc(var(--left) + 1rem);
}
100% {
top: min(calc(var(--top) + 3rem), calc(80vh - 1rem));
left: calc(var(--left) - 4rem);
}
}
.cursor {
position: absolute;
top: calc(var(--top, 11rem) - 2rem);
left: calc(var(--left, 50vw) - 2rem);
transform: rotate(-20deg);
pointer-events: none;
}
.cursor path {
fill: #12486b;
}
.cursor--red polygon {
animation: hurting-hand;
animation-duration: 30s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes hurting-hand {
33% {
fill: #ff7d66;
}
100% {
fill: #419197;
}
}
.water {
position: absolute;
top: 80vh;
left: 0;
width: 100%;
height: 20vh;
background: linear-gradient(#78d6c6, #12486b);
opacity: 0.6;
}
</style>
</head>
<body>
<div id="hive-line" class="hive-line"></div>
<div class="hive-text">别点！</div>
<div id="hive" class="hive">
<div class="hive__division"></div>
<div class="hive__division"></div>
<div class="hive__division"></div>
<div class="hive__division"></div>
<div class="hive__division"></div>
<div class="hive__door"></div>
</div>
<div id="cursor" class="cursor">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="tiny"
id="svg3010"
x="0"
y="0"
width="4rem"
height="4rem"
viewBox="100 0 600 450"
overflow="visible"
xml:space="preserve"
>
<polygon
fill="#FFFFFF"
points="296,210 291,237 312,258 376,386 504,391 520,354.1 536,306 541,199 520,178 488,162 440,146 408,141 392,66 360,66 355,237 323,205 "
/>
<path
d="M344,66h16v176h-16v-16h-16v-16h16V66z M536,194v112h16V194H536z M280,194v48h16v-32h32v-16H280z M328,290v-32h-16v32H328z M344,322v-32h-16v32H344z M360,354v48h160v-47.9h-16V386H376l0,0v-32H360l0-32h-16v32H360z M520,354h16v-48h-16V354z M312,258v-16 h-16v16H312z M520,178v16h16v-16H520z M488,162v64h16v-48h16v-16H488z M440,146v64h16v-48h32v-16H440z M408,130V66h-16v144h16v-64 h32v-16H408z M360,50v16h32V50H360z"
/>
</svg>
</div>
<div id="bee-wrapper" class="bee_wrapper"></div>
<div id="water" class="water"></div>
<script>
const hive = document.getElementById('hive');
const hiveLine = document.getElementById('hive-line');
const cursor = document.getElementById('cursor');
const beeWrapper = document.getElementById('bee-wrapper');
const water = document.getElementById('water');
let provoked = false;
const beeNumber = 30;
hive.addEventListener('click', () => {
hive.classList.add('hive--provoked');
hiveLine.classList.add('hive-line--provoked');
cursor.classList.add('cursor--red');
provoked = true;
let beeCount = 0;
const intervalID = setInterval(() => {
if (beeCount >= beeNumber) {
clearInterval(intervalID);
}
const bee = document.createElement('div');
bee.classList.add('bee');
beeWrapper.appendChild(bee);
beeCount = beeCount + 1;
}, 300);
});
const cursorFunction = (mouse) => {
const clientX = mouse.clientX
? mouse.clientX
: mouse.touches[0].clientX;
const clientY = mouse.clientY
? mouse.clientY
: mouse.touches[0].clientY;
document.body.style = `--top: ${clientY}px; --left: ${clientX}px;`;
};
window.addEventListener('mousemove', cursorFunction);
window.addEventListener('touchstart', cursorFunction);
water.addEventListener('mouseover', () => {
cursor.classList.remove('cursor--red');
});
water.addEventListener('mouseout', () => {
if (provoked) {
cursor.classList.add('cursor--red');
}
});
</script>
</body>
</html>