html 萤火虫特效,纯CSS3制作萤火虫动画特效

body {

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

height:100vh;

background:radial-gradient(#0a2a43 30%,#09243a);

font-family:'Asap',sans-serif;

}

body:after {

content:'';

display:block;

position:absolute;

top:1rem;

right:1rem;

bottom:1rem;

left:1rem;

border:4px solid #071c2d;

border-radius:2px;

background:none;

pointer-events:none;

}

.label {

flex:0;

color:#b8c5d0;

letter-spacing:.04em;

text-align:center;

margin-bottom:2rem;

font-size:3rem;

}

@media screen and (min-width:60rem) {

.label {

font-size:5vw;

}

}.checkbox-wrap {

flex:none;

position:relative;

width:10%;

min-width:8rem;

z-index:1;

}

.checkbox-wrap:after {

content:'';

display:block;

padding-top:50%;

}

.checkbox {

display:none;

}

.checkbox:checked ~ .firefly .abdomen {

background:#27231e;

box-shadow:inset 0 0 1.5rem rgba(150,0,0,0.75);

animation:flicker 4000ms ease infinite;

}

.checkbox:checked ~ .firefly .wing-a {

transform:rotate(30deg);

}

.checkbox:checked ~ .firefly .wing-b {

transform:rotate(-30deg);

}

.head {

position:absolute;

top:15%;

left:60%;

bottom:15%;

background:#27231e;

width:70%;

border-radius:40% 80% 80% 40%;

box-shadow:inset -0.1rem 0 0 0.3rem rgba(14,10,10,0.2);

}

.eyes {

position:absolute;

top:-5%;

right:10%;

bottom:-5%;

width:35%;

}

.eyes:before,.eyes:after {

content:'';

display:block;

position:absolute;

right:0;

width:100%;

box-sizing:border-box;

border-radius:100%;

background:#0e0a0a;

padding-top:100%;

}

.eyes:before {

top:0;

}

.eyes:after {

bottom:0;

}

.antennae {

position:absolute;

top:20%;

left:-150%;

bottom:20%;

width:400%;

z-index:-1;

}

.antennae:before,.antennae:after {

content:'';

display:block;

position:absolute;

right:0;

width:100%;

box-sizing:border-box;

border-color:#0e0a0a;

border-style:solid;

padding-top:65%;

border-width:.25rem .25rem .25rem 0;

}

.antennae:before {

top:80%;

border-radius:0 100% 100% 100%;

}

.antennae:after {

bottom:80%;

border-radius:100% 100% 100% 0;

}

.thorax {

position:absolute;

top:0;

left:100%;

bottom:0;

background:#d43b1f;

width:30%;

border-radius:20% 80% 80% 20%;

box-shadow:inset -0.1rem 0 0.1rem 0.3rem rgba(0,0,0,0.2);

}

.abdomen {

position:absolute;

top:10%;

right:20%;

bottom:10%;

background:#27231e;

width:100%;

transition:all 1000ms ease;

border-radius:100% 30% 30% 100%;

box-sizing:border-box;

}

.abdomen:after {

content:'';

display:block;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

background:repeating-linear-gradient(90deg,transparent 0,transparent 15%,rgba(0,0,20,0.1) 15%,rgba(0,0,20,0.1) 20%);

mix-blend-mode:multiply;

border-radius:100% 30% 30% 100%;

z-index:0;

box-shadow:inset -1rem 0 0.2rem 0.3rem rgba(0,0,0,0.1);

}

.wings {

position:absolute;

top:-20%;

right:0;

bottom:-20%;

left:-5%;

z-index:1;

}

.wings .wing {

position:absolute;

right:0;

background:repeating-linear-gradient(#27231e 0%,#27231e 40%,#191613 40%,#191613 60%);

width:100%;

height:50%;

transition:all 200ms ease-out;

border:1px solid #40341d;

box-sizing:border-box;

box-shadow:inset 0.2rem 0 0.1rem 0.5rem rgba(0,0,0,0.5);

}

.wings .wing.wing-a {

transform-origin:bottom right;

top:0;

border-radius:90% 30% 0 20%;

}

.wings .wing.wing-b {

transform-origin:top right;

top:50%;

border-radius:20% 0 30% 90%;

}

@keyframes flicker {

0%,100% {

background:#fefa01;

box-shadow:0 0 1rem #fefa01,inset -0.25rem 0 0 0.5rem rgba(14,10,10,0.1);

}

30%,70% {

background:#fffd99;

box-shadow:-1rem 0 8rem 1rem #fefa01,inset -0.25rem 0 0 0.5rem rgba(14,10,10,0.1);

}

50% {

box-shadow:-1rem 0 8rem 1rem rgba(254,250,1,0.8),inset -0.25rem 0 0 0.5rem rgba(14,10,10,0.1);

}

}