大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了CSS绘制一只萌萌哒的大熊猫的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
10年积累的成都做网站、成都网站制作、成都外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站策划后付款的网站建设流程,更有禹会免费网站建设让你可以放心的选择与我们合作。
黑眼圈的大熊猫可谓非常可爱,今天就用CSS实现以下萌萌哒的大熊猫一枚(效果如下):
html代码:
代码详解:
一、制作帽子
使用边框制作三角形,用伪类制作帽子上面的小球
.hat { position: absolute; border-bottom: 150px solid red; border-left: 75px solid transparent; border-right: 75px solid transparent; left: 75px; z-index: 2; } .hat::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; left: -15px; top: -8px; }
二、制作熊猫脸哈哈哈
.face { position: absolute; width: 300px; height: 250px; background-color: #fff; border-radius: 50%; top: 133px; }
三、制作眼睛
使用径向渐变制作,因为两只眼睛旋转的对称的,所以使用了变量控制旋转,加了阴影使眼睛更逼真
.eyes { position: absolute; width: 100px; height: 80px; border-radius: 50%; transform: rotate(calc(-60deg * var(--n))); } .eyesLeft { left: 10px; top: 100px; --n: 1; background: radial-gradient(circle at 53% 72%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 80%, #fff 3px, transparent 3px), radial-gradient(circle at 50% 75%, #000 8px, transparent 8px), radial-gradient(circle at 50% 70%, white 15px, transparent 15px), #000; box-shadow: -3px 3px 0 3px rgba(0, 0, 0, .1); } .eyesRight { right: 10px; top: 100px; --n: -1; background: radial-gradient(circle at 45% 74%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 80%, #fff 3px, transparent 3px), radial-gradient(circle at 50% 75%, #000 8px, transparent 8px), radial-gradient(circle at 50% 70%, white 15px, transparent 15px), #000; box-shadow: 3px 3px 0 3px rgba(0, 0, 0, .1); }
四、制作鼻子
鼻子只是一个椭圆+阴影
.nose { position: absolute; width: 50px; height: 20px; background-color: #666; border-radius: 50%; left: calc((300px - 50px)/2); box-shadow: 2px 2px 0 2px rgba(0, 0, 0, .1); bottom: 60px; }
五、制作嘴巴
背景色为透明的圆角矩形+黑色的边框制作,去掉上边框
.mouth { position: absolute; width: 100px; height: 20px; background-color: transparent; border-bottom: 10px solid #000; border-radius: 77% 77% 77%/60% 60% 90% 90%; bottom: 20px; left: calc((300px - 100px)/2); }
六:制作耳朵
两个黑色的椭圆,宽>高
.ear { position: absolute; width: 100px; height: 80px; background-color: #000; border-radius: 50%; top: 141px; transform: rotate(calc(40deg * var(--e))); } .earL { --e: 1; left: 0; } .earR { --e: -1; right: 0; }
感谢你能够认真阅读完这篇文章,希望小编分享CSS绘制一只萌萌哒的大熊猫的方法内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!