[分享]css3怎么画企鹅

CSS3是一种很强大的样式语言，它可以让网页设计变得更加生动、美观。在CSS3中，我们可以利用各种新的特性来制作出更加出彩的效果。下面我们就来讲一下如何用CSS3来画企鹅。.penguin { : r...

CSS3是一种很强大的样式语言，它可以让网页设计变得更加生动、美观。在CSS3中，我们可以利用各种新的特性来制作出更加出彩的效果。下面我们就来讲一下如何用CSS3来画企鹅。

.penguin {
  position: relative;
}

.right-hand {
  position: absolute;
  bottom: -10px;
  right: -50px;
  width: 30px;
  height: 70px;
  background-color: black;
  border-radius: 30px 30px 0 0;
}

.left-hand {
  position: absolute;
  bottom: -10px;
  left: -50px;
  width: 30px;
  height: 70px;
  background-color: black;
  border-radius: 30px 30px 0 0;
}

.right-foot {
  position: absolute;
  bottom: -50px;
  right: -20px;
  width: 50px;
  height: 20px;
  background-color: black;
  border-radius: 50px 50px 0 0;
}

.left-foot {
  position: absolute;
  bottom: -50px;
  left: -20px;
  width: 50px;
  height: 20px;
  background-color: black;
  border-radius: 50px 50px 0 0;
}

.body {
  background-color: black;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  position: relative;
}

.white {
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.eye {
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  position: absolute;
  top: 20px;
  left: 25px;
}

.black-eye {
  background-color: white;
  width: 15px;
  height: 15px;
  border-radius: 7.5px;
  position: absolute;
  top: 7.5px;
  left: 7.5px;
}

.beak {
  border: 15px solid transparent;
  border-bottom: 20px solid black;
  border-top: none;
  position: absolute;
  top: 55px;
  left: 30px;
}

.white-belly {
  background-color: white;
  width: 80px;
  height: 70px;
  border-radius: 40px;
  position: absolute;
  top: 90px;
  left: 20px;
} 

现在，我们已经完成了所有的CSS3代码。以上的代码根据企鹅身体不同部分的定位和颜色来编写。请记得将这些代码放到HTML文件的head标签中的style标签中，这样这些样式才会生效。

最后，如果你想在你的网页上显示这只可爱的企鹅，需要做以下几个步骤：

1. 在你的HTML文件的body中添加一个div标签，并在这个标签中添加class为“penguin”。

2. 在div标签中添加五个div标签，并将它们的class分别设为“right-hand”、“right-foot”、“left-hand”、“left-foot”和“body”。

3. 在“body”标签中添加两个div标签，并将它们的class分别设为“white”和“eye”。

4. 在“eye”标签中添加一个div标签，将它的class设为“black-eye”。

5. 在“body”标签中添加一个div标签，并将它的class设为“beak”。

6. 在“body”标签中添加一个div标签，并将它的class设为“white-belly”。

完成上述步骤之后，在浏览器中打开你的HTML文件，你应该就能看到这只可爱的企鹅啦！