[分享]css写一个冰墩墩

CSS（层叠样式表）是一种用于网页样式控制的语言，我们可以用它来设计出各种各样的网页效果。下面我们就来看看如何用CSS来写一个可爱的冰墩墩。.ice { : relative; width: 200p...

CSS（层叠样式表）是一种用于网页样式控制的语言，我们可以用它来设计出各种各样的网页效果。下面我们就来看看如何用CSS来写一个可爱的冰墩墩。

.ice {
  position: relative;
  width: 200px;
  height: 300px;
  background-color: #c9eafe;
  border-radius: 100px 100px 0 0;
  box-shadow: 0 0 20px #b9d1db;
}

.ice:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #c9eafe;
  border-radius: 50%;
  transform: rotate(-45deg);
  box-shadow: 0 0 20px #b9d1db;
}

.ice:after {
  content: "";
  position: absolute;
  top: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #c9eafe;
  border-radius: 50%;
  transform: rotate(45deg);
  box-shadow: 0 0 20px #b9d1db;
}

.face {
  position: absolute;
  top: 90px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f2f5f8;
  border-radius: 50%;
  box-shadow: 0 0 10px #000;
}

.eye {
  position: absolute;
  top: 120px;
  left: 75px;
  width: 20px;
  height: 20px;
  background-color: #162029;
  border-radius: 50%;
}

.eye.right {
  left: 105px;
}

.mouth {
  position: absolute;
  top: 160px;
  left: 75px;
  width: 50px;
  height: 25px;
  border-bottom: 2px solid #000;
  border-radius: 0 0 25px 25px;
} 

现在我们来解释一下上面的这些CSS代码：
首先我们设定一个类名为“ice”的样式，用来作为整个冰墩墩的框架。然后通过border-radius属性设置上部分有圆弧边缘，下部分平直，实现冰墩墩的形状。background-color属性设置为浅蓝色，添加一些阴影效果。接下来我们通过:before和:after伪元素来添加冰墩墩的两个小“脑袋”，给整个作品增加了一份可爱的味道。
之后我们通过.face样式给冰墩墩添加了一个小脸，通过.box-shadow属性为它添加阴影。然后再添加两只眼睛和一张嘴巴。最后通过相应的位置和left、top属性对元素进行微调，完成整个冰墩墩的制作。