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

前端Hardy

于 2025-04-02 16:51:23 发布

阅读量1.2k

点赞数 14

分类专栏： CSS 文章标签： html css 前端 javascript 3d

本文链接：https://blog.csdn.net/weixin_52814911/article/details/146954806

版权

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

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

演示效果

HTML&CSS


<!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

最低0.47元/天解锁文章