HTML&CSS：必学！手把手教你实现动态天气图标

这段HTML和CSS代码描述了一个动态天气图标集合的效果，通过CSS动画和样式实现了多种天气状态的动态展示。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        html {
            box-sizing: border-box;
        }

        html *,
        html *:before,
        html *:after {
            box-sizing: inherit;
        }

        body {
            max-width: 42em;
            padding: 2em;
            margin: 0 auto;
            color: #161616;
            font-family: 'Roboto', sans-serif;
            text-align: center;
            background-color: currentColor;
        }

        h1 {
            margin-bottom: 1.375em;
            color: #fff;
            font-weight: 100;
            font-size: 2em;
            text-transform: uppercase;
        }

        p,
        a {
            color: rgba(255, 255, 255, 0.3);
            font-size: small;
        }

        p {
            margin: 1.375rem 0;
        }

        .icon {
            position: relative;
            display: inline-block;
            width: 12em;
            height: 10em;
            font-size: 1em;
            /* control icon size here */
        }

        .cloud {
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            width: 3.6875em;
            height: 3.6875em;
            margin: -1.84375em;
            background: currentColor;
            border-radius: 50%;
            box-shadow:
                -2.1875em 0.6875em 0 -0.6875em,
                2.0625em 0.9375em 0 -0.9375em,
                0 0 0 0.375em #fff,
                -2.1875em 0.6875em 0 -0.3125em #fff,
                2.0625em 0.9375em 0 -0.5625em #fff;
        }

        .cloud:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -0.5em;
            display: block;
            width: 4.5625em;
            height: 1em;
            background: currentColor;
            box-shadow: 0 0.4375em 0 -0.0625em #fff;
        }

        .cloud:nth-child(2) {
            z-index: 0;
            background: #fff;
            box-shadow:
                -2.1875em 0.6875em 0 -0.6875em #fff,
                2.0625em 0.9375em 0 -0.9375em #fff,
                0 0 0 0.375em #fff,
                -2.1875em 0.6875em 0 -0.3125em #fff,
                2.0625em 0.9375em 0 -0.5625em #fff;
            opacity: 0.3;
            transform: scale(0.5) translate(6em, -3em);
            animation: cloud 4s linear infinite;
        }

        .cloud:nth-child(2):after {
            background: #fff;
        }

        .sun {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2.5em;
            height: 2.5em;
            margin: -1.25em;
            background: currentColor;
            border-radius: 50%;
            box-shadow: 0 0 0 0.375em #fff;
            animation: spin 12s infinite linear;
        }

        .rays {
            position: absolute;
            top: -2em;
            left: 50%;
            display: block;
            width: 0.375em;
            height: 1.125em;
            margin-left: -0.1875em;
            background: #fff;
            border-radius: 0.25em;
            box-shadow: 0 5.375em #fff;
        }

        .rays:before,
        .rays:after {
            content: '';
            position: absolute;
            top: 0em;
            left: 0em;
            display: block;
            width: 0.375em;
            height: 1.125em;
            transform: rotate(60deg);
            transform-origin: 50% 3.25em;
            background: #fff;
            border-radius: 0.25em;
            box-shadow: 0 5.375em #fff;
        }

        .rays:before {
            transform: rotate(120deg);
        }

        .cloud+.sun {
            margin: -2em 1em;
        }

        .rain,
        .lightning,
        .snow {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            width: 3.75em;
            height: 3.75em;
            margin: 0.375em 0 0 -2em;
            background: currentColor;
        }

        .rain:after {
            content: '';
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            width: 1.125em;
            height: 1.125em;
            margin: -1em 0 0 -0.25em;
            background: #0cf;
            border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
            box-shadow:
                0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
                -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
                -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            transform: rotate(-28deg);
            animation: rain 3s linear infinite;
        }

        .bolt {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -0.25em 0 0 -0.125em;
            color: #fff;
            opacity: 0.3;
            animation: lightning 2s linear infinite;
        }

        .bolt:nth-child(2) {
            width: 0.5em;
            height: 0.25em;
            margin: -1.75em 0 0 -1.875em;
            transform: translate(2.5em, 2.25em);
            opacity: 0.2;
            animation: lightning 1.5s linear infinite;
        }

        .bolt:before,
        .bolt:after {
            content: '';
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            margin: -1.625em 0 0 -1.0125em;
            border-top: 1.25em solid transparent;
            border-right: 0.75em solid;
            border-bottom: 0.75em solid;
            border-left: 0.5em solid transparent;
            transform: skewX(-10deg);
        }

        .bolt:after {
            margin: -0.25em 0 0 -0.25em;
            border-top: 0.75em solid;
            border-right: 0.5em solid transparent;
            border-bottom: 1.25em solid transparent;
            border-left: 0.75em solid;
            transform: skewX(-10deg);
        }

        .bolt:nth-child(2):before {
            margin: -0.75em 0 0 -0.5em;
            border-top: 0.625em solid transparent;
            border-right: 0.375em solid;
            border-bottom: 0.375em solid;
            border-left: 0.25em solid transparent;
        }

        .bolt:nth-child(2):after {
            margin: -0.125em 0 0 -0.125em;
            border-top: 0.375em solid;
            border-right: 0.25em solid transparent;
            border-bottom: 0.625em solid transparent;
            border-left: 0.375em solid;
        }

        .flake:before,
        .flake:after {
            content: '\2744';
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -1.025em 0 0 -1.0125em;
            color: #fff;
            list-height: 1em;
            opacity: 0.2;
            animation: spin 8s linear infinite reverse;
        }

        .flake:after {
            margin: 0.125em 0 0 -1em;
            font-size: 1.5em;
            opacity: 0.4;
            animation: spin 14s linear infinite;
        }

        .flake:nth-child(2):before {
            margin: -0.5em 0 0 0.25em;
            font-size: 1.25em;
            opacity: 0.2;
            animation: spin 10s linear infinite;
        }

        .flake:nth-child(2):after {
            margin: 0.375em 0 0 0.125em;
            font-size: 2em;
            opacity: 0.4;
            animation: spin 16s linear infinite reverse;
        }


        /* Animations */

        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes cloud {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 0.3;
            }

            100% {
                opacity: 0;
                transform: scale(0.5) translate(-200%, -3em);
            }
        }

        @keyframes rain {
            0% {
                background: #0cf;
                box-shadow:
                    0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
                    -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
                    -1.375em -0.125em 0 #0cf;
            }

            25% {
                box-shadow:
                    0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
                    -0.875em 1.125em 0 -0.125em #0cf,
                    -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            }

            50% {
                background: rgba(255, 255, 255, 0.3);
                box-shadow:
                    0.625em 0.875em 0 -0.125em #0cf,
                    -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
                    -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            }

            100% {
                box-shadow:
                    0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2),
                    -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
                    -1.375em -0.125em 0 #0cf;
            }
        }

        @keyframes lightning {
            45% {
                color: #fff;
                background: #fff;
                opacity: 0.2;
            }

            50% {
                color: #0cf;
                background: #0cf;
                opacity: 1;
            }

            55% {
                color: #fff;
                background: #fff;
                opacity: 0.2;
            }
        }
    </style>
</head>

<body>
    <h1>动态天气图标</h1>
    <div class="icon sun-shower">
        <div class="cloud"></div>
        <div class="sun">
            <div class="rays"></div>
        </div>
        <div class="rain"></div>
    </div>

    <div class="icon thunder-storm">
        <div class="cloud"></div>
        <div class="lightning">
            <div class="bolt"></div>
            <div class="bolt"></div>
        </div>
    </div>

    <div class="icon cloudy">
        <div class="cloud"></div>
        <div class="cloud"></div>
    </div>

    <div class="icon flurries">
        <div class="cloud"></div>
        <div class="snow">
            <div class="flake"></div>
            <div class="flake"></div>
        </div>
    </div>

    <div class="icon sunny">
        <div class="sun">
            <div class="rays"></div>
        </div>
    </div>

    <div class="icon rainy">
        <div class="cloud"></div>
        <div class="rain"></div>
    </div>
</body>

</html>

HTML 结构

h1：页面标题，显示页面的主题内容。
icon sun-shower：定义一个动态天气图标，表示"太阳雨"天气，包含云、太阳和雨的组合元素。
cloud：表示云的图形元素，通过CSS实现云的形状和动态效果。
sun：表示太阳的图形元素，通过CSS实现太阳的形状和动态效果。
rain：表示雨的图形元素，通过CSS实现雨的动态效果。
lightning：表示闪电的图形元素，通过CSS实现闪电的闪烁效果。
bolt：表示闪电的分支元素，通过CSS实现闪电分支的形状和动态效果。
flake：表示雪花的图形元素，通过CSS实现雪花的动态效果。
snow：表示雪花的容器元素，通过CSS实现雪花的整体动态效果。
sunny：定义一个表示"晴天"的动态天气图标。
rainy：定义一个表示"雨天"的动态天气图标。

CSS 样式

.icon：定义动态天气图标的容器样式，设置图标的宽度、高度和字体大小，控制图标的大小和布局。
.cloud：定义云的样式，设置云的形状（圆形）、阴影、位置和动画，实现云的动态效果（如移动和透明度变化）。
.sun：定义太阳的样式，设置太阳的形状（圆形）、阴影和动画，实现太阳的旋转效果。
.rays：定义太阳光线的样式，设置太阳光线的形状、阴影和动画，实现光线的动态效果。
.rain：定义雨的样式，设置雨的形状、阴影和动画，实现雨滴的动态效果。
.lightning：定义闪电的样式，设置闪电的形状、颜色和动画，实现闪电的闪烁效果。
.bolt：定义闪电分支的样式，设置闪电分支的形状、颜色和动画，实现闪电分支的动态效果。
.flake：定义雪花的样式，设置雪花的形状、颜色和动画，实现雪花的旋转和动态效果。
.snow：定义雪花的容器样式，用于包含雪花元素，通过CSS样式和动画实现雪花的整体动态效果。
@keyframes spin：定义旋转动画，用于实现太阳光线、雪花等元素的旋转效果。
@keyframes cloud：定义云的动画，实现云的移动和透明度变化效果。
@keyframes rain：定义雨的动画，实现雨滴的动态效果。
@keyframes lightning：定义闪电的动画，实现闪电的闪烁效果。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！