CSS绘制一只萌萌哒的大熊猫的方法-创新互联
这篇文章主要介绍了CSS绘制一只萌萌哒的大熊猫的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
目前成都创新互联公司已为1000多家的企业提供了网站建设、域名、虚拟空间、网站托管、企业网站设计、松北网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。黑眼圈的大熊猫可谓非常可爱,今天就用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绘制一只萌萌哒的大熊猫的方法内容对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站制作公司行业资讯频道,遇到问题就找创新互联建站,详细的解决方法等着你来学习!
网站标题:CSS绘制一只萌萌哒的大熊猫的方法-创新互联
文章源于:http://pwwzsj.com/article/cscihg.html