.bee {
width: 240px;
height: 240px;
position: relative;
overflow: hidden;
margin: auto;
&__body {
background: yellow;
width: 80%;
height: 60%;
border-radius: 50%;
top: 30%;
overflow: hidden;
position: relative;
border: solid 1px black;
z-index: 9;
box-shadow:
inset 40px 20px 20px rgba(255,0,0,0.2),
inset -40px -10px 15px rgba(255, 0, 0, 0.3);
}
&__stripes {
background: black;
position: absolute;
top: -10%;
left: 10%;
height: 120%;
width: 15%;
border-radius: 50%;
&--center {
left: 35%;
width: 30%;
border-radius: 50%;
}
&--right {
right: 10%;
left: auto;
}
}
&__wings {
width: 35%;
height: 60%;
background: rgba(255,255,255,0.7);
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: 0;
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.3);
&-cover {
width: 23%;
height: 10%;
border-radius: 50%;
background: black;
position: absolute;
z-index: 99;
top:50%;
left: 29%;
}
&--top-left {
left: 17%;
animation: wings-left-movement-negative 1s linear infinite;
}
&--bottom-left {
left: 27%;
z-index:99;
animation: wings-left-movement-positive 1s linear infinite;
}
&--top-right {
left: 20%;
animation: wings-right-movement-negative 1s linear infinite;
}
&--bottom-right {
left: 24%;
z-index: 99;
animation: wings-right-movement-positive 1s linear infinite;
}
@keyframes wings-right-movement-positive {
0% {transform: rotate(5deg)}
50% {transform: rotate(12deg)}
100% {transform: rotate(5deg)}
}
@keyframes wings-right-movement-negative {
0% {transform: rotate(-5deg)}
50% {transform: rotate(-12deg)}
100% {transform: rotate(-5deg)}
}
@keyframes wings-left-movement-positive {
0% {transform: rotate(15deg)}
50% {transform: rotate(22deg)}
100% {transform: rotate(15deg)}
}
@keyframes wings-left-movement-negative {
0% {transform: rotate(-15deg)}
50% {transform: rotate(-22deg)}
100% {transform: rotate(-15deg)}
}
}
&__head {
width: 30%;
height: 30%;
border-radius: 50%;
background: black;
position: absolute;
bottom: 25%;
left:70%;
overflow: hidden;
}
&__eye {
height: 32%;
width: 30%;
background: white;
position: absolute;
border-radius: 50%;
right: 15%;
top: 20%;
&-pupil {
height: 50%;
width: 50%;
background: black;
position: absolute;
border-radius: 50%;
top: 25%;
right: 10%;
}
}
}