使用html+css画出你心中夏天的感觉# 使用 HTML + CSS 画出你心中夏天的感觉夏天是一个充满活力的季节

使用 HTML + CSS 画出你心中夏天的感觉

夏天是一个充满活力的季节，阳光明媚，万物复苏。在这个季节里，我们可以感受到温暖的阳光、蓝天和清新的海风。接下来，我将通过 HTML 和 CSS 画出我心中夏天的感觉。

1. 设计思路

在这篇文章中，我们将创建一个简单的夏日场景，包含蓝天、太阳、白云和海洋。通过使用 HTML 来构建结构，再通过 CSS 来呈现样式，营造出一种清新、明亮的夏日氛围。

2. HTML 结构

首先，我们需要定义 HTML 结构。我们将创建一个包含太阳、云彩和海洋的容器。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏天的感觉</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="sky"></div>
        <div class="sun"></div>
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="ocean"></div>
    </div>
</body>
</html>

3. CSS 样式

接下来，我们来定义 CSS 样式，使得上述结构呈现出夏天的感觉。

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.sky {
    background-color: #87CEEB; /* 天空蓝 */
    height: 70%;
    width: 100%;
}

.sun {
    position: absolute;
    top: 20%;
    left: 70%;
    width: 100px;
    height: 100px;
    background-color: #FFD700; /* 太阳金色 */
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

.cloud {
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cloud1 {
    width: 80px;
    height: 50px;
    top: 10%;
    left: 20%;
}

.cloud1:before, .cloud1:after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud1:before {
    width: 60px;
    height: 40px;
    top: -20px;
    left: 10px;
}

.cloud1:after {
    width: 40px;
    height: 30px;
    top: 10px;
    left: 40px;
}

.cloud2 {
    width: 100px;
    height: 60px;
    top: 5%;
    left: 60%;
}

.cloud2:before, .cloud2:after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud2:before {
    width: 70px;
    height: 50px;
    top: -20px;
    left: 10px;
}

.cloud2:after {
    width: 50px;
    height: 40px;
    top: 10px;
    left: 30px;
}

.ocean {
    background-color: #1E90FF; /* 海洋蓝 */
    height: 30%;
    width: 100%;
    position: absolute;
    bottom: 0;
}

4. 效果展示

将上述 HTML 和 CSS 代码放在一起，您会看到一个简单而美丽的夏日场景。清澈的蓝天，明亮的太阳，悠闲的白云，以及宽广的海洋，构成了一幅生动的夏天画面。

5. 总结

通过这次简单的 HTML 和 CSS 实践，我们成功地展现了心中夏天的感觉。夏天的元素，如蓝天、阳光、白云和海洋，都通过简单的代码得以实现。希望这个小项目能够激发您的创意，继续探索更多的前端开发可能性。