如何利用css画出一只小鸟(代码)

2020-11-27 来源：我们爱旅游
本篇文章给大家分享的内容是关于利用css画出一只小鸟,内容很详细,有需要的朋友可以参考一下,希望可以帮助到你们.
也不难，一步步的写出身体部位，再定位上去就好了。来一张效果图，后面给两个加了动画，稍微难看一点，后期慢慢修改
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<style type="text/css">
 body{
 font-size: 0;
 text-align: center;
 }
 .wrap{
 position: relative;
 width: 500px;
 margin: 0 auto;
 }
 .a{ 
 display: inline-block;
 margin-top: 30px;
 width: 250px;
 height: 240px;
 background-color:#f2b22e;
 border: 1px solid #f2b22e;
 border-radius: 60% 60% 70% 70%;
 }

 .b{ 
 display: inline-block;
 width: 0;
 height: 0;
 border-bottom:40px solid #f2b22e;
 border-right: 60px solid transparent; 
 border-left: 12px solid transparent; 
 transform: rotate(40deg);
 position: absolute;
 top: 26px;
 right: 115px;
 }
 .c{
 display: inline-block;
 width: 0;
 height: 0;
 border-top:60px solid #f2b22e;
 border-right: 60px solid transparent; 
 border-left: 12px solid transparent; 
 transform: rotate(140deg);
 position: absolute;
 top: 26px;
 left: 105px;
 }
 .d{
 width: 100px;
 height: 40px;
 border-radius: 50%;
 border:1px solid #f2b22e;
 background-color: #f2b22e;
 transform: rotate(0deg);
 position: absolute;
 top: 150px;
 right: 72px;
 animation: bird_right 0.5s linear infinite;
 }
 .e{
 width: 100px;
 height: 40px;
 border-radius: 50%;
 border:1px solid #f2b22e;
 background-color: #f2b22e;
 transform: rotate(0deg);
 position: absolute;
 top: 150px;
 left: 72px;
 animation: bird_left 0.5s linear infinite;
 }
 .f{
 width: 40px;
 height: 40px;
 border: 20px solid #fff;
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 top: 80px;
 left: 155px;
 }
 .g{
 width: 40px;
 height: 40px;
 border: 20px solid #fff;
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 top: 80px;
 right: 155px;
 }
 .h{
 width: 0;
 height: 0;
 border-top:20px solid #e27326;
 border-left:20px solid transparent;
 border-right:20px solid transparent;
 position: absolute;
 top: 147px;
 left: 230px;
 }
 .i{
 width: 160px;
 height: 100px;
 border:1px solid #f3cc74;
 background-color: #f3cc74;
 border-radius: 50%;
 position: absolute;
 bottom: 0px;
 left: 170px;
 }
 .j{
 width: 12px;
 border-bottom:20px solid #e27326;
 border-radius: 50%;
 position: absolute;
 }
 .j_{
 bottom: 14px;
 left: 163px;
 }
 .k{
 left: 155px;
 bottom: 18px;
 }
 .l{
 left: 170px;
 bottom: 10px;
 }
 .n{
 bottom: 10px;
 right: 163px;
 }
 .m{
 bottom: 18px;
 right: 155px;
 }
 .o{
 bottom: 5px;
 right: 170px;
 }
 @-webkit-keyframes bird_left{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(-10deg)}
 20% {transform:rotate(-20deg)}
 40% {transform:rotate(-30deg)}
 60% {transform:rotate(-40deg)}
 80% {transform:rotate(-50deg)}
 100% {transform:rotate(-60deg)}
 }
 @-webkit-keyframes bird_right{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(10deg)}
 20% {transform:rotate(20deg)}
 40% {transform:rotate(30deg)}
 60% {transform:rotate(40deg)}
 80% {transform:rotate(50deg)}
 100% {transform:rotate(60deg)}
 }

 @-moz-keyframes bird_right{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(10deg)}
 20% {transform:rotate(20deg)}
 40% {transform:rotate(30deg)}
 60% {transform:rotate(40deg)}
 80% {transform:rotate(50deg)}
 100% {transform:rotate(60deg)}
 }
 @-moz-keyframes bird_left{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(-10deg)}
 20% {transform:rotate(-20deg)}
 40% {transform:rotate(-30deg)}
 60% {transform:rotate(-40deg)}
 80% {transform:rotate(-50deg)}
 100% {transform:rotate(-60deg)}
 }

 @-o-keyframes bird_left{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(-10deg)}
 20% {transform:rotate(-20deg)}
 40% {transform:rotate(-30deg)}
 60% {transform:rotate(-40deg)}
 80% {transform:rotate(-50deg)}
 100% {transform:rotate(-60deg)}
 }
 @-o-keyframes bird_right{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(10deg)}
 20% {transform:rotate(20deg)}
 40% {transform:rotate(30deg)}
 60% {transform:rotate(40deg)}
 80% {transform:rotate(50deg)}
 100% {transform:rotate(60deg)}
 }
</style>
<body>
 <p class="wrap">
 <p class="a"></p>
 <p class="b"></p>
 <p class="c"></p>
 <p class="d"></p>
 <p class="e"></p>
 <p class="f"></p>
 <p class="g"></p>
 <p class="h"></p>
 <p class="i"></p>
 <p class="j j_"></p>
 <p class="j k"></p>
 <p class="j l"></p>
 <p class="j n"></p>
 <p class="j m"></p>
 <p class="j o"></p>
 </p>
</body> 
</html>
全部栏目

如何利用css画出一只小鸟(代码)
