如何利用css画出一只小鸟(代码)
本篇文章给大家分享的内容是关于利用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画出一只小鸟(代码)的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影:贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
威尔R.E.P.O.有交叉游戏吗?
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
