纯css3实现蜜蜂动效
蜜蜂的大小可以根据物体的盒子大小来动态设置。 蜜蜂身体的各个部位主要由border-radius来实现的
效果图如下：
代码附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>honeybee</title>
<style>
body{
margin:50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060c21;
}
.box{
position: relative;
display: flex;
width: 300px;
height: 300px;
z-index: 200;
transform: rotate(-40deg)
}
.box div{
position: absolute;
background-color: #060c21;
border:2px solid #fff;
}
.header{
position: absolute;
top: 13%;
left: 32%;
width: 34%;
height: 28%;
border-radius: 50%;
z-index: 130;
}
.header .mouth{
top: 64%;
left: 32%;
width: 35%;
height: 8%;
border-radius: 0 0 50% 50%/0 0 100% 100% ;
border-top: none;
}
.box .antenna{
top: 4%;
width: 14%;
height: 18%;
z-index: 7;
}
.box .antenna::after{
position: absolute;
content: "";
top: -14%;
left: -25%;
width: 20%;
height: 20%;
border:2px solid #fff;
border-radius: 50% ;
}
.box .antenna-left{
left: 34%;
border-radius: 0 100% 100% 0/50%;
border-left: none;
}
.box .antenna-right{
right: 34%;
border-radius: 100% 0 0 100%/50%;
border-right: none;
}
.box .antenna-right::after{
left: 100%;
}
.eye{
width: 34%;
height: 34%;
border-radius: 50% ;
z-index: 11;
}
.eye-left{
top:-6%;
left:-3%;
}
.eye-right{
top:-6%;
right:-3%;
}
.eye::after{
position: absolute;
content: "";
top:28%;
left:34%;
width: 30%;
height: 30%;
background: red;
border-radius: 50% ;
}
.body{
top:22%;
left:34%;
width: 30%;
height: 52%;
border-radius: 52% 48% 49% 51% / 44% 49% 51% 56% ;
z-index: 9;
overflow: hidden;
}
.body-line{
position: absolute;
top: 25%;
left: -5%;
width: 110%;
height: 30%;
border-radius: 0 0 70% 70%/0 0 70% 70% ;
z-index: 10;
}
.line-2{
top:45%;
z-index: 9;
}
.tail{
top:72%;
left:47%;
width: 4%;
height: 10%;
border-radius: 52% 48% 49% 51% / 1% 0% 100% 99% ;
z-index: 8;
}
.top-left-wing{
top:22%;
left: 1%;
width: 38%;
height: 30%;
border-radius: 33% 67% 25% 75% / 36% 78% 22% 64%;
z-index: 8;
}
.bottom-left-wing{
top: 48%;
left: 12%;
width: 27%;
height: 25%;
border-radius: 100% 0% 70% 30% / 59% 46% 54% 41% ;
z-index: 7;
}
.top-right-wing{
top:22%;
right: 1%;
width: 38%;
height: 30%;
border-radius: 73% 27% 100% 0% / 53% 28% 72% 47% ;
z-index: 8;
}
.bottom-right-wing{
top: 48%;
right: 12%;
width: 27%;
height: 25%;
border-radius: 22% 78% 40% 60% / 38% 67% 33% 62% ;
z-index: 7;
}
.top-left-wing,.bottom-left-wing{
transform-origin: 100% 50%;
animation: rotateWing 0.8s linear infinite alternate;
}
.top-right-wing,.bottom-right-wing{
transform-origin: 0% 50%;
animation: rotateWing 0.8s linear infinite alternate;
}
@keyframes rotateWing {
0% {
transform: rotate(0deg) scale(1,1);
}
100% {
transform: rotateX(30deg) scale(0.5,1.2);
}
}
</style>
<div class="box">
<div class="antenna antenna-left"></div>
<div class="antenna antenna-right"></div>
<div class="header">
<div class="eye eye-left"></div>
<div class="eye eye-right"></div>
<div class='mouth'></div>
</div>
<div class="body">
<div class="body-line "></div>
<div class="body-line line-2"></div>
</div>
<div class="tail"></div>
<div class="top-left-wing"></div>
<div class='bottom-left-wing'></div>
<div class='top-right-wing'></div>
<div class='bottom-right-wing'></div>
</div>
</body>
</html>
调整背景颜色white，和边框颜色black，可以看到背景白色蜜蜂
