这篇博客展示了如何使用CSS来创建一个具有头、身体、耳朵和脚的可爱动物造型。通过利用各种CSS属性，如border-radius、transform和animation，实现了头部的圆形渐变边角、身体的立体感以及在鼠标悬停时眼睛颜色的变化动画效果。同时，还通过旋转和定位技巧创建了耳朵和脚的形状，使得整个动物造型栩栩如生。
*{
margin: 0;
padding: 0;
}
div.head{
margin-top: 100px;
margin-left: 200px;
width: 200px;
height: 100px;
background: greenyellow;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: relative;
}
div.head:after{
content:"";
position: absolute;
top: 50px;
left: 50px;
width: 20px;
height: 20px;
background: white;
border-radius: 10px;
}
div.head:before{
content:"";
position: absolute;
top: 50px;
right: 50px;
width: 20px;
height: 20px;
background: white;
border-radius: 10px;
}
div.left-ear{
width: 10px;
height: 50px;
background: greenyellow;
position: absolute;
left: 30px;
top: -30px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
}
div.right-ear{
width: 10px;
height: 50px;
background: greenyellow;
position: absolute;
right: 30px;
top: -30px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
}
div.body{
width: 200px;
height: 200px;
background: greenyellow;
margin-top: 10px;
margin-left: 200px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
position: relative;
perspective: 500px;
}
div.body:after{
content:"";
position: absolute;
top:0;
left: -40px;
width: 30px;
height: 130px;
background: greenyellow;
border-radius: 20px;
}
div.body:before{
content:"";
position: absolute;
top:0;
right: -40px;
width: 30px;
height: 130px;
background: greenyellow;
border-radius: 20px;
}
div.body_1{
width: 70px;
height: 70px;
background: white;
position: absolute;
top: 40px;
left: 77px;
box-shadow: 0px 0px 50px #ADFF2F;
transform: rotateY(50deg) rotate(45deg) translateY(10px);
-webkit-transform: rotateX(50deg) rotate(45deg) translateY(10px);
-moz-transform: rotateX(50deg) rotate(45deg) translateY(10px);
}
div.body_2{
width: 50px;
height: 50px;
background: white;
position: absolute;
top: 100px;
left: 50px;
transform: skewY(34deg);
}
div.body_3{
width: 50px;
height: 50px;
background: white;
position: absolute;
top: 100px;
right: 40px;
transform: skewY(-34deg);
}
div.left_foot{
width: 30px;
height: 100px;
background: greenyellow;
position: absolute;
top:150px;
left:20px;
border-radius: 20px;
z-index: -1;
}
div.right_foot{
width: 30px;
height: 100px;
background: greenyellow;
position: absolute;
top:150px;
right:20px;
border-radius: 20px;
z-index: -1;
}
@-webkit-keyframes eye{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
@keyframes eye{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div.body:hover{
-webkit-animation-name: eye;
-webkit-animation-duration: 1s;
animation-name: eye;
animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;;
}
扫一扫
6394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
