這篇文章帶給大家的內容是介紹CSS繪製一隻萌萌噠的大熊貓的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。
黑眼圈的大貓熊可謂非常可愛，今天就用CSS實現以下萌萌噠的大熊貓一枚（效果如下）：
代碼在這裡：https://codepen.io/woshilyy/p...
html程式碼：
<p> <span></span> <span></span> <span></span> <span> <span></span> <span></span> <span></span> <span></span> </span> </p>
程式碼詳解：
一、製作帽子
使用邊框製作三角形，用偽類製作帽子上面的小球
.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如何繪製一隻萌萌噠的大熊貓？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
