Custom Code Experiment •
CSS Ladybird
Source Code View HTML / CSS / JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>CSS Ladybird</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: linear-gradient(-45deg, #2d5016, #4a7c23, #6b9e3e, #4a7c23);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
position: relative;
touch-action: none;
display: flex;
justify-content: center;
align-items: center;
}
/* Subtle leaf texture overlay */
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.15;
background-image:
radial-gradient(ellipse 40px 80px at 20% 30%, rgba(60, 90, 30, 0.3) 0%, transparent 50%),
radial-gradient(ellipse 50px 90px at 80% 20%, rgba(70, 100, 40, 0.25) 0%, transparent 50%),
radial-gradient(ellipse 45px 85px at 60% 70%, rgba(55, 85, 35, 0.3) 0%, transparent 50%),
radial-gradient(ellipse 35px 70px at 30% 80%, rgba(65, 95, 38, 0.28) 0%, transparent 50%),
radial-gradient(ellipse 55px 95px at 85% 65%, rgba(58, 88, 32, 0.26) 0%, transparent 50%),
radial-gradient(ellipse 42px 78px at 15% 60%, rgba(62, 92, 36, 0.29) 0%, transparent 50%),
radial-gradient(ellipse 48px 88px at 70% 25%, rgba(68, 98, 42, 0.27) 0%, transparent 50%),
radial-gradient(ellipse 38px 75px at 45% 85%, rgba(56, 86, 34, 0.31) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Vein-like details */
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.08;
background-image:
linear-gradient(135deg, transparent 48%, rgba(40, 60, 25, 0.4) 49%, rgba(40, 60, 25, 0.4) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(45, 65, 28, 0.35) 49%, rgba(45, 65, 28, 0.35) 51%, transparent 52%);
background-size: 120px 120px, 95px 95px;
background-position: 0 0, 40px 40px;
pointer-events: none;
z-index: 0;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.beetle-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.beetle {
position: relative;
display: block;
}
.body {
width: 240px;
height: 180px;
position: relative;
border-radius: 120px 120px 140px 140px;
background: linear-gradient(135deg, #e63946 0%, #c1121f 50%, #e63946 100%);
box-shadow:
0 16px 40px rgba(0,0,0,0.6),
inset 0 -10px 30px rgba(0,0,0,0.3),
inset 0 6px 16px rgba(255,255,255,0.2);
z-index: 2;
cursor: pointer;
overflow: visible;
}
/* Split shell into left and right halves */
.shell-left,
.shell-right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: linear-gradient(135deg, #e63946 0%, #c1121f 50%, #e63946 100%);
transition: transform 1.5s ease-in-out;
transform-origin: center center;
}
.shell-left {
left: 0;
border-radius: 120px 0 0 140px;
box-shadow:
-8px 16px 40px rgba(0,0,0,0.6),
inset 0 -10px 30px rgba(0,0,0,0.3),
inset 0 6px 16px rgba(255,255,255,0.2);
}
.shell-right {
right: 0;
border-radius: 0 120px 140px 0;
box-shadow:
8px 16px 40px rgba(0,0,0,0.6),
inset 0 -10px 30px rgba(0,0,0,0.3),
inset 0 6px 16px rgba(255,255,255,0.2);
}
/* Open state */
.body.open .shell-left {
transform: translateX(-20px) rotateY(-25deg);
}
.body.open .shell-right {
transform: translateX(20px) rotateY(25deg);
}
/* Realistic fly/insect wings */
.wings {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.wing {
position: absolute;
width: 200px;
height: 240px;
opacity: 0;
transition: all 1.5s ease-in-out;
top: 50%;
}
.wing-left {
left: 0;
transform: translateY(-50%) scale(0.1);
transform-origin: right center;
}
.wing-right {
right: 0;
transform: translateY(-50%) scale(0.1);
transform-origin: left center;
}
.body.open .wing-left {
opacity: 1;
transform: translateY(-50%) translateX(-120px) scale(1) rotate(-10deg);
}
.body.open .wing-right {
opacity: 1;
transform: translateY(-50%) translateX(120px) scale(1) rotate(10deg);
}
/* Wing membrane - ultra-thin and translucent */
.wing-inner {
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 20% 15%, rgba(255,255,255,0.6) 0%, transparent 30%),
radial-gradient(ellipse at 40% 25%, rgba(245,250,255,0.4) 0%, transparent 25%),
linear-gradient(120deg,
rgba(240,245,250,0.25) 0%,
rgba(230,240,248,0.3) 30%,
rgba(220,235,245,0.28) 60%,
rgba(210,230,243,0.25) 100%
);
border-radius: 48% 52% 60% 40% / 35% 45% 55% 65%;
position: relative;
/* Very thin border to simulate membrane edge */
border: 0.5px solid rgba(180,200,220,0.3);
/* Subtle shadow for depth */
box-shadow:
0 2px 8px rgba(0,0,0,0.15),
inset 0 0 30px rgba(255,255,255,0.2);
/* Slight iridescence effect */
background-blend-mode: overlay;
}
/* Blue and orange wing coloring - translucent membranes */
.wing-left .wing-inner {
background:
radial-gradient(ellipse at 20% 15%, rgba(255,255,255,0.7) 0%, transparent 30%),
radial-gradient(ellipse at 40% 25%, rgba(150,200,255,0.5) 0%, transparent 25%),
linear-gradient(120deg,
rgba(100,150,255,0.45) 0%,
rgba(80,130,240,0.5) 30%,
rgba(60,110,220,0.48) 60%,
rgba(40,90,200,0.45) 100%
);
}
.wing-right .wing-inner {
background:
radial-gradient(ellipse at 20% 15%, rgba(255,255,255,0.7) 0%, transparent 30%),
radial-gradient(ellipse at 40% 25%, rgba(255,200,150,0.5) 0%, transparent 25%),
linear-gradient(120deg,
rgba(255,160,80,0.45) 0%,
rgba(240,140,60,0.5) 30%,
rgba(220,120,40,0.48) 60%,
rgba(200,100,20,0.45) 100%
);
}
/* Primary vein structure - thicker structural veins */
.wing-inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* Leading edge vein (costa) - thickest */
linear-gradient(to bottom,
rgba(60,70,80,0.8) 0%,
rgba(60,70,80,0.7) 3%,
transparent 3%
),
/* Main radial veins from base */
linear-gradient(118deg,
transparent 0%,
transparent 14.5%,
rgba(70,80,90,0.6) 15%,
rgba(70,80,90,0.6) 15.5%,
transparent 16%
),
linear-gradient(125deg,
transparent 0%,
transparent 19.5%,
rgba(75,85,95,0.55) 20%,
rgba(75,85,95,0.55) 20.5%,
transparent 21%
),
linear-gradient(135deg,
transparent 0%,
transparent 24.5%,
rgba(75,85,95,0.5) 25%,
rgba(75,85,95,0.5) 25.5%,
transparent 26%
),
linear-gradient(145deg,
transparent 0%,
transparent 29.5%,
rgba(80,90,100,0.45) 30%,
rgba(80,90,100,0.45) 30.5%,
transparent 31%
),
linear-gradient(155deg,
transparent 0%,
transparent 34.5%,
rgba(80,90,100,0.4) 35%,
rgba(80,90,100,0.4) 35.5%,
transparent 36%
),
/* Posterior veins */
linear-gradient(165deg,
transparent 0%,
transparent 44.5%,
rgba(85,95,105,0.35) 45%,
rgba(85,95,105,0.35) 45.5%,
transparent 46%
);
background-size: 100% 100%;
border-radius: 48% 52% 60% 40% / 35% 45% 55% 65%;
pointer-events: none;
}
/* Cross-veins and fine vein network */
.wing-veins {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* Cross-veins connecting main veins */
repeating-linear-gradient(
125deg,
transparent 0px,
transparent 28px,
rgba(90,100,110,0.25) 28px,
rgba(90,100,110,0.25) 28.5px,
transparent 28.5px,
transparent 58px
),
repeating-linear-gradient(
135deg,
transparent 0px,
transparent 32px,
rgba(90,100,110,0.2) 32px,
rgba(90,100,110,0.2) 32.5px,
transparent 32.5px,
transparent 64px
),
/* Fine membrane corrugations */
repeating-linear-gradient(
115deg,
transparent 0px,
transparent 8px,
rgba(100,110,120,0.08) 8px,
rgba(100,110,120,0.08) 8.3px,
transparent 8.3px,
transparent 16px
);
border-radius: 48% 52% 60% 40% / 35% 45% 55% 65%;
pointer-events: none;
/* Subtle corrugation effect */
opacity: 0.7;
}
/* Wing cells (areas between veins) - very subtle */
.wing-veins::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* Subtle cell highlights */
radial-gradient(ellipse 40px 50px at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 60%),
radial-gradient(ellipse 35px 45px at 50% 45%, rgba(250,252,255,0.12) 0%, transparent 60%),
radial-gradient(ellipse 38px 48px at 35% 60%, rgba(248,251,255,0.13) 0%, transparent 60%),
radial-gradient(ellipse 42px 52px at 55% 70%, rgba(252,254,255,0.11) 0%, transparent 60%);
border-radius: 48% 52% 60% 40% / 35% 45% 55% 65%;
}
/* Wing line detail - black center line */
.body::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 70%;
background: rgba(0,0,0,0.8);
border-radius: 4px;
}
/* Shiny spot on shell */
.body::after {
content: "";
position: absolute;
top: 15%;
right: 20%;
width: 35px;
height: 35px;
background: rgba(255,255,255,0.25);
border-radius: 50%;
box-shadow: -70px 25px 0 -8px rgba(255,255,255,0.15);
}
/* Black spots on ladybird */
.spot {
position: absolute;
background: #000;
border-radius: 50%;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.spot1 {
width: 40px;
height: 40px;
top: 18%;
left: 30%;
}
.spot2 {
width: 40px;
height: 40px;
top: 18%;
right: 30%;
}
.spot3 {
width: 38px;
height: 38px;
top: 52%;
left: 36%;
}
.spot4 {
width: 38px;
height: 38px;
top: 52%;
right: 36%;
}
.spot5 {
width: 35px;
height: 35px;
bottom: 12%;
left: 64%;
}
.spot6 {
width: 35px;
height: 35px;
bottom: 12%;
right: 64%;
}
.head {
width: 120px;
height: 100px;
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #000 0%, #1a1a1a 100%);
border-radius: 60px 60px 20px 20px;
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
z-index: 1;
}
/* Antennae */
.antenna {
width: 6px;
height: 70px;
position: absolute;
top: 10px;
background: linear-gradient(to top, #1a1a1a 0%, #000 100%);
border-radius: 6px;
transform-origin: bottom center;
}
.antenna::after {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
}
.antenna.left {
left: 30px;
transform: rotate(-25deg);
animation: wiggle-left 2s infinite ease-in-out;
}
.antenna.right {
right: 30px;
transform: rotate(25deg);
animation: wiggle-right 2s infinite ease-in-out;
}
.eye {
width: 24px;
height: 24px;
position: absolute;
top: 50px;
background-color: rgba(255,255,255,0.95);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.eye:after {
width: 12px;
height: 12px;
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
border-radius: 50%;
}
.eye.left {
left: 24px;
}
.eye.right {
right: 24px;
}
/* Legs */
.legs-container {
position: absolute;
width: 240px;
height: 180px;
top: 0;
left: 0;
z-index: 1;
}
.leg {
position: absolute;
width: 80px;
height: 12px;
background: linear-gradient(90deg, #000 0%, #1a1a1a 100%);
border-radius: 6px;
transform-origin: left center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.leg::after {
content: "";
position: absolute;
right: -60px;
top: 50%;
width: 60px;
height: 10px;
background: linear-gradient(90deg, #1a1a1a 0%, #000 100%);
border-radius: 5px;
transform: translateY(-50%) rotate(-45deg);
transform-origin: left center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
/* Left legs */
.leg.left {
left: -10px;
transform-origin: right center;
}
.leg.left::after {
right: auto;
left: -60px;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.leg.left-front {
top: 40px;
transform: rotate(-30deg);
}
.leg.left-middle {
top: 80px;
transform: rotate(-45deg);
}
.leg.left-back {
top: 120px;
transform: rotate(-60deg);
}
/* Right legs */
.leg.right {
right: -10px;
left: auto;
transform-origin: left center;
}
.leg.right::after {
right: -60px;
left: auto;
transform: translateY(-50%) rotate(-45deg);
transform-origin: left center;
}
.leg.right-front {
top: 40px;
transform: rotate(30deg);
}
.leg.right-middle {
top: 80px;
transform: rotate(45deg);
}
.leg.right-back {
top: 120px;
transform: rotate(60deg);
}
@keyframes wiggle-left {
0%, 100% {
transform: rotate(-25deg);
}
50% {
transform: rotate(-35deg);
}
}
@keyframes wiggle-right {
0%, 100% {
transform: rotate(25deg);
}
50% {
transform: rotate(35deg);
}
}
@media (max-width: 768px) {
.legs-container {
width: 192px;
height: 144px;
}
.body {
width: 192px;
height: 144px;
border-radius: 96px 96px 112px 112px;
}
.body::before {
width: 3px;
}
.body::after {
width: 28px;
height: 28px;
box-shadow: -56px 20px 0 -6px rgba(255,255,255,0.15);
}
.spot1 {
width: 32px;
height: 32px;
}
.spot2 {
width: 32px;
height: 32px;
}
.spot3 {
width: 30px;
height: 30px;
}
.spot4 {
width: 30px;
height: 30px;
}
.spot5 {
width: 28px;
height: 28px;
}
.spot6 {
width: 28px;
height: 28px;
}
.head {
width: 96px;
height: 80px;
top: -48px;
border-radius: 48px 48px 16px 16px;
}
.eye {
width: 20px;
height: 20px;
top: 40px;
}
.eye:after {
width: 10px;
height: 10px;
}
.eye.left {
left: 20px;
}
.eye.right {
right: 20px;
}
.antenna {
width: 5px;
height: 56px;
top: 8px;
}
.antenna::after {
top: -6px;
width: 10px;
height: 10px;
}
.antenna.left {
left: 24px;
}
.antenna.right {
right: 24px;
}
.leg {
width: 64px;
height: 10px;
}
.leg::after {
width: 48px;
height: 8px;
}
.leg.left {
left: -8px;
}
.leg.left::after {
left: -48px;
}
.leg.left-front {
top: 32px;
}
.leg.left-middle {
top: 64px;
}
.leg.left-back {
top: 96px;
}
.leg.right {
right: -8px;
}
.leg.right::after {
right: -48px;
}
.leg.right-front {
top: 32px;
}
.leg.right-middle {
top: 64px;
}
.leg.right-back {
top: 96px;
}
}
</style>
</head>
<body>
<div class="beetle-container">
<div class="beetle">
<div class="legs-container">
<!-- Left legs -->
<div class="leg left left-front"></div>
<div class="leg left left-middle"></div>
<div class="leg left left-back"></div>
<!-- Right legs -->
<div class="leg right right-front"></div>
<div class="leg right right-middle"></div>
<div class="leg right right-back"></div>
</div>
<div class="body">
<div class="wings">
<div class="wing wing-left">
<div class="wing-inner">
<div class="wing-veins"></div>
</div>
</div>
<div class="wing wing-right">
<div class="wing-inner">
<div class="wing-veins"></div>
</div>
</div>
</div>
<div class="shell-left">
<div class="spot spot1"></div>
<div class="spot spot3"></div>
<div class="spot spot5"></div>
</div>
<div class="shell-right">
<div class="spot spot2"></div>
<div class="spot spot4"></div>
<div class="spot spot6"></div>
</div>
<div class="head">
<div class="antenna left"></div>
<div class="antenna right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
</div>
</div>
</div>
</div>
<script>
const body = document.querySelector('.body');
// Toggle shell opening on click
body.addEventListener('click', function() {
body.classList.toggle('open');
});
// Auto-open and close animation loop
function autoAnimate() {
setTimeout(() => {
body.classList.add('open');
setTimeout(() => {
body.classList.remove('open');
setTimeout(autoAnimate, 3000);
}, 3000);
}, 2000);
}
// Start auto-animation
autoAnimate();
</script>
</body>
</html>