HTML画出蓝色小鸟|极客教程

HTML画出蓝色小鸟

在网页设计中，我们经常会使用HTML和CSS来创建各种各样的图形和动画效果。本文将介绍如何使用HTML和CSS来画出一个可爱的蓝色小鸟，让你的网页更加生动有趣。

1. 创建小鸟的身体

首先，我们需要创建小鸟的身体。我们可以使用一个div元素来表示小鸟的身体，然后通过CSS来设置它的样式，让它呈现出蓝色的外观。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Bird</title>
<style>
    .bird {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
    }
</style>
</head>
<body>
    <div class="bird"></div>
</body>
</html>

Output:

HTML画出蓝色小鸟

在上面的示例代码中，我们创建了一个宽高为50px的div元素，并设置了背景颜色为蓝色，同时使用border-radius属性将其设置为圆形，从而呈现出小鸟的身体。

2. 创建小鸟的头部

接下来，我们需要创建小鸟的头部。我们可以使用另一个div元素来表示小鸟的头部，并通过CSS来设置它的样式，让它呈现出蓝色的外观。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Bird</title>
<style>
    .bird {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        position: relative;
    }
    .head {
        width: 20px;
        height: 20px;
        background-color: #3498db;
        border-radius: 50%;
        position: absolute;
        top: -20px;
        left: 15px;
    }
</style>
</head>
<body>
    <div class="bird">
        <div class="head"></div>
    </div>
</body>
</html>

Output:

HTML画出蓝色小鸟

在上面的示例代码中，我们在小鸟的身体内部创建了一个宽高为20px的div元素，作为小鸟的头部，并设置了背景颜色为蓝色，同时使用border-radius属性将其设置为圆形，通过position属性将其定位在小鸟身体的上方。

3. 创建小鸟的眼睛

小鸟的眼睛是小鸟形象中非常重要的一部分，我们可以使用两个div元素来表示小鸟的眼睛，并通过CSS来设置它们的样式，让它们呈现出黑色的外观。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Bird</title>
<style>
    .bird {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        position: relative;
    }
    .head {
        width: 20px;
        height: 20px;
        background-color: #3498db;
        border-radius: 50%;
        position: absolute;
        top: -20px;
        left: 15px;
    }
    .eye {
        width: 5px;
        height: 5px;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
    }
    .left-eye {
        top: 5px;
        left: 5px;
    }
    .right-eye {
        top: 5px;
        right: 5px;
    }
</style>
</head>
<body>
    <div class="bird">
        <div class="head">
            <div class="eye left-eye"></div>
            <div class="eye right-eye"></div>
        </div>
    </div>
</body>
</html>

Output:

HTML画出蓝色小鸟

在上面的示例代码中，我们在小鸟的头部内部创建了两个宽高为5px的div元素，分别表示小鸟的左眼和右眼，并设置了背景颜色为黑色，通过position属性将它们定位在小鸟头部的适当位置。

4. 创建小鸟的嘴巴

小鸟的嘴巴是小鸟形象中另一个重要的部分，我们可以使用一个div元素来表示小鸟的嘴巴，并通过CSS来设置它的样式，让它呈现出橙色的外观。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Bird</title>
<style>
    .bird {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        position: relative;
    }
    .head {
        width: 20px;
        height: 20px;
        background-color: #3498db;
        border-radius: 50%;
        position: absolute;
        top: -20px;
        left: 15px;
    }
    .eye {
        width: 5px;
        height: 5px;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
    }
    .left-eye {
        top: 5px;
        left: 5px;
    }
    .right-eye {
        top: 5px;
        right: 5px;
    }
    .beak {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid #f39c12;
        position: absolute;
        top: 10px;
        left: 8px;
    }
</style>
</head>
<body>
    <div class="bird">
        <div class="head">
            <div class="eye left-eye"></div>
            <div class="eye right-eye"></div>
            <div class="beak"></div>
        </div>
    </div>
</body>
</html>

Output:

HTML画出蓝色小鸟

在上面的示例代码中，我们在小鸟的头部内部创建了一个宽度为0、高度为0的div元素，通过设置border属性来绘制小鸟的嘴巴，同时设置背景颜色为橙色，通过position属性将其定位在小鸟头部的适当位置。

5. 创建小鸟的翅膀

小鸟的翅膀是小鸟形象中让小鸟更加生动的部分，我们可以使用两个div元素来表示小鸟的翅膀，并通过CSS来设置它们的样式，让它们呈现出蓝色的外观。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Bird</title>
<style>
    .bird {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        position: relative;
    }
    .head {
        width: 20px;
        height: 20px;
        background-color: #3498db;
        border-radius: 50%;
        position: absolute;
        top: -20px;
        left: 15px;
    }
    .eye {
        width: 5px;
        height: 5px;
        background-color: #000;
        border-radius: 50%;
        position: absolute;
    }
    .left-eye {
        top: 5px;
        left: 5px;
    }
    .right-eye {
        top: 5px;
        right: 5px;
    }
    .beak {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid #f39c12;
        position: absolute;
        top: 10px;
        left: 8px;
    }
    .wing {
        width: 30px;
        height: 20px;
        background-color: #3498db;
        position: absolute;
        top: 10px;
        left: -10px;
        transform: rotate(45deg);
    }
</style>
</head>
<body>
    <div class="bird">
        <div class="head">
            <div class="eye left-eye"></div>
            <div class="eye right-eye"></div>
            <div class="beak"></div>
        </div>
        <div class="wing"></div>
        <div class="wing" style="transform: rotate(-45deg);"></div>
    </div>
</body>
</html>