資訊專欄INFORMATION COLUMN
摘要：黑眼圈的大熊貓可謂非常可愛，今天就用實(shí)現(xiàn)以下萌萌噠的大熊貓一枚代碼在這兒代碼代碼詳解一制作帽子使用邊框制作三角形，用偽類制作帽子上面的小球二制作熊貓臉哈哈哈三制作眼睛使用徑向漸變制作，因?yàn)閮芍谎劬πD(zhuǎn)的對(duì)稱的，所以使用了
黑眼圈的大熊貓可謂非?？蓯?，今天就用CSS實(shí)現(xiàn)以下萌萌噠的大熊貓一枚
代碼在這兒：https://codepen.io/woshilyy/p...
body代碼：
代碼詳解：
一、制作帽子
使用邊框制作三角形，用偽類制作帽子上面的小球
.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;
}
三、制作眼睛
使用徑向漸變制作，因?yàn)閮芍谎劬πD(zhuǎn)的對(duì)稱的，所以使用了變量控制旋轉(zhuǎn)，加了陰影使眼睛更逼真
.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);
}
四、制作鼻子
鼻子只是一個(gè)橢圓+陰影
.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);
}
六：制作耳朵
兩個(gè)黑色的橢圓，寬>高
.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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113750.html
摘要：上一篇，講到了，最近，在做的設(shè)計(jì)對(duì)于設(shè)計(jì)，一方面是對(duì)于后端框架的設(shè)計(jì)，另一方面呢，是對(duì)于整個(gè)體系的設(shè)計(jì)在這里呢，我們來理理思路，先來大致分一下塊風(fēng)格就不用說了，我們就用風(fēng)格，接下來，也就是我們所說的接口描述語言框架，整個(gè)服務(wù)的核心驅(qū)動(dòng)版本控 上一篇，講到了，最近，在做 api 的設(shè)計(jì) 對(duì)于設(shè)計(jì)，一方面是對(duì)于后端 server 框架的設(shè)計(jì)，另一方面呢，是對(duì)于整個(gè) api 體系的設(shè)計(jì) 在這...
摘要：昨晚月日微信應(yīng)用號(hào)萌萌噠的化身小程序才剛開始宣布內(nèi)測(cè)，今天朋友圈就刷屏了真是一石激起千層浪，各種分析預(yù)測(cè)文章鋪天蓋地而來，讓人應(yīng)接不暇。微信小程序?qū)崿F(xiàn)了千千萬萬前端工程師開發(fā)的夢(mèng)想，想不火都難。 showImg(https://segmentfault.com/img/remote/1460000006981816?w=900&h=500); 昨晚（9月21日）微信應(yīng)用號(hào)萌萌噠的化身—...
摘要：說到版本控制，大多數(shù)人的大腦中都一定會(huì)立刻想到和吧，只可惜，這次的主角可不是他們雖說和雖好，對(duì)于一些項(xiàng)目也能夠進(jìn)行很好的開發(fā)，但是呢，對(duì)于某些場(chǎng)景，還是有些不住的比如，我們來舉一個(gè)場(chǎng)景現(xiàn)在我們的源碼大約有，然后呢，采用的是分支開發(fā)，主干發(fā)布 showImg(https://segmentfault.com/img/bVEqqm?w=793&h=357); 說到版本控制，大多數(shù)人的大腦中...
閱讀 2874·2021-09-27 13:35
閱讀 637·2021-09-23 11:22
閱讀 2908·2019-08-30 15:54
閱讀 1623·2019-08-29 16:27
閱讀 2480·2019-08-29 15:05
閱讀 2364·2019-08-23 18:11
閱讀 3533·2019-08-23 16:32
閱讀 2952·2019-08-23 14:56
