css制作鸟 |设置阴影css3

/* 鸟的基本样式 */
.bird {
width: 100px;
height: 70px;
position: relative;
border-top-left-radius: 50px; 
border-top-right-radius: 50px;
background-color: #cde6f7;
overflow: hidden;
}
/* 鸟的眼睛 */
.eye {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #323232;
}
/* 鸟的嘴巴 */
.beak {
position: absolute;
top: 35px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #f6c102;
}
/* 鸟的翅膀 */
.wing {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 70px;
transform-origin: top right;
background-color: #aaccff;
box-shadow: -10px 0 10px 2px rgba(0,0,0,0.5);
}
/* 鸟的移动动画 */
.bird:hover .wing {
animation: flap 0.5s ease-in-out infinite;
}
@keyframes flap {
0% {
transform: rotate(0);
}
50% {
transform: rotate(80deg);
}
100% {
transform: rotate(0);
}
}

以上就是一些基本的CSS代码。你可以根据自己的需求进一步调整鸟的样式和动画。希望这篇文章对你有帮助！