使用css3绘制一个QQ小企鹅的LOGO# 使用 CSS3 绘制 QQ 小企鹅 LOGO 在这篇文章中，我们将使用 C

使用 CSS3 绘制 QQ 小企鹅 LOGO

在这篇文章中，我们将使用 CSS3 来绘制一个简单的 QQ 小企鹅 LOGO。我们将利用 CSS 的形状、渐变和动画特性来实现。

1. HTML 结构

首先，我们需要创建一个基本的 HTML 结构。我们将在其中包含一个容器，里面放置小企鹅的各个部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ 小企鹅 LOGO</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="penguin">
        <div class="body"></div>
        <div class="face"></div>
        <div class="eye left-eye"></div>
        <div class="eye right-eye"></div>
        <div class="beak"></div>
        <div class="ear left-ear"></div>
        <div class="ear right-ear"></div>
    </div>
</body>
</html>

2. CSS 样式

接下来，我们将使用 CSS 来实现小企鹅的样式。我们将使用边框和背景颜色来构建小企鹅的各个部分。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.penguin {
    position: relative;
    width: 200px;
    height: 250px;
}

.body {
    position: absolute;
    width: 120px;
    height: 160px;
    background-color: #000;
    border-radius: 60px 60px 40px 40px;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.eye {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
    top: 40px;
}

.left-eye {
    left: 30px;
}

.right-eye {
    right: 30px;
}

.beak {
    position: absolute;
    width: 30px;
    height: 15px;
    background-color: #ffcc00;
    border-radius: 5px;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.ear {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    top: -15px;
}

.left-ear {
    left: 10px;
}

.right-ear {
    right: 10px;
}

3. 解释各部分样式

企鹅身体：通过设置 border-radius 来实现圆形的效果，并使用黑色作为背景色。
企鹅脸：在身体上方绘制一个白色圆形，模拟小企鹅的脸部。
眼睛：使用两个小黑圆圈作为眼睛，定位在脸部的合适位置。
嘴巴：用一个黄色的矩形，通过旋转让它看起来像嘴巴。
耳朵：在头部顶部绘制两个黑色圆形，模拟企鹅的耳朵。

4. 动画效果（可选）

为了让小企鹅更加生动，我们可以添加一些简单的动画效果。比如可以让小企鹅的眼睛进行眨动。

@keyframes blink {
    0%, 100% {
        height: 20px;
    }
    50% {
        height: 0; /* 眨眼时高度变为0 */
    }
}

.left-eye, .right-eye {
    animation: blink 3s infinite; /* 每3秒眨一次眼 */
}

5. 总结

通过以上的步骤，我们成功使用 CSS3 绘制了一个简单的 QQ 小企鹅 LOGO。我们结合了不同的 CSS 属性，包括 border-radius、background-color、position 和 animation，使得我们的企鹅不仅外形可爱，还带有动态效果。

您可以根据需要调整各部分的大小、颜色和位置，创造出独特的企鹅形象。希望这篇文章能对您有所帮助，让您在使用 CSS3 时更加得心应手。