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