利用CSS3实现天气图标

最新推荐文章于 2024-09-07 01:13:50 发布
最新推荐文章于 2024-09-07 01:13:50 发布
阅读量878 收藏 5
点赞数
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24698097/article/details/116154981
版权

本文利用CSS3实现天气的图标，包括晴天，多云，雨天，下雪，打雷，采用了CSS3中的box-shadow，动画特效采用animation。其中主要采用box-shaow属性，感觉这个属性功能还挺强，详细说明见链接：https://www.runoob.com/cssref/css3-pr-box-shadow.html

直接上代码，整体代码比较简单，如何使用的话需要微调位置，这个比较麻烦，需要耐心调。下雪的图标：

整体效果如下所示：

首先HTML代码

    <div class="weather">
        <div class="container">
            <div class="sunny">
                <div class="sunny_body"></div>
            </div>
            <div class="cloudy">
                <div class="cloud"></div>
            </div>
            <div class="rainy">
                <div class="rain"></div>
            </div>
            <div class="snowy">
                <div class="snow1"></div>
                <div class="snow2"></div>
            </div>
            <div class="thundery">
                <div class="thunder1"></div>
                <div class="thunder2"></div>
            </div>
        </div>
    </div>

CSS部分

 /*包括晴天，多云，下雨，下雪，打雷*/
    .weather {
        height: 400px;
        width: 100%;
        position: relative;
        background: rgb(5, 5, 5);
        top: 50%;
        /* left: 30%; */
    }

    .container {
        position: absolute;
        display: flex;
        left: 30%;
        top: 50%;
    }

    .sunny {
        border-radius: 50%;
        content: "";
        height: 25px;
        width: 25px;
        position: absolute;
        border: 5px solid #ffffff;
        left: 60px;
        top: 10px;
        -webkit-animation: sunny 15s linear infinite;
        animation: sunny 15s linear infinite;
    }

    .sunny:after {
        content: " ";
        width: 5px;
        height: 20px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transform: rotate(20deg);
        border-radius: 15px;
        box-shadow: 0px 35px 0 1px #fff, 0 -35px 0 1px #fff;
    }

    .sunny_body {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        height: 20px;
        margin: auto;
        transform: rotate(80deg);
        border-radius: 15px;
        box-shadow: 0px 35px 0 1px #fff, 0 -35px 0 1px #fff;
    }

    .sunny_body:after {
        content: " ";
        position: absolute;
        width: 5px;
        height: 20px;
        margin: auto;
        transform: rotate(60deg);
        border-radius: 15px;
        box-shadow: 0 35px 0 1px #fff, 0 -35px 0 1px #fff;
    }

    @-webkit-keyframes sunny {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes sunny {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }


    /* CLOUDY */
    .cloudy {
        background: currentColor;
        border-radius: 50%;
        position: absolute;
        left: 90px;
        top: 25px;
        z-index: 10;
        width: 50px;
        height: 50px;
        margin: -29.5px;
        margin-left: 150px;
        box-shadow: -35px 11px 0 -8px, 31px 13px 0 -10px, 0 0 0 6px #ffff,
            -35px 11px 0 -2px #ffffff, 31px 13px 0 -4px #ffffff;
    }

    .cloudy:after {
        background: currentColor;
        content: "";
        height: 20px;
        width: 65px;
        z-index: 10;
        position: absolute;
        left: -10px;
        bottom: -3px;
        box-shadow: 0 7px 0 -1px #fff;
    }

    .cloud {
        background: #a19d9d;
        border-radius: 50%;
        position: absolute;
        left: 100px;
        top: 25px;
        z-index: 10;
        width: 25px;
        height: 25px;
        margin: -29.5px;
        box-shadow: -35px 11px 0 -14px #a19d9d, 33px 15px 0 -15px #a19d9d,
            0 0 0 6px #a19d9d, -15px 5px 0 1px #a19d9d, 13px 7px 0 0px #a19d9d;
        -webkit-animation: cloudy_shadow 10s linear infinite;
        animation: cloudy_shadow 10s linear infinite;
    }

    .cloud:after {
        background: #a19d9d;
        border-radius: 30%;
        content: "";
        height: 5px;
        width: 20px;
        position: absolute;
        left: 1px;
        z-index: 10;
        bottom: -6px;
        box-shadow: 0 4px 0 -4px #a19d9d;
    }

    @-webkit-keyframes cloudy_shadow {
        0% {
            -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
            opacity: 1;
        }

        50% {
            -webkit-transform: translateX(-80px) scale(1);
            transform: translateX(-80px) scale(1);
            opacity: 0.2;
        }

        100% {
            -webkit-transform: translateX(-120px) scale(1);
            transform: translateX(-120px) scale(1);
            opacity: 0.05;
        }
    }

    @keyframes cloudy_shadow {
        0% {
            -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
            opacity: 1;
        }

        50% {
            -webkit-transform: translateX(-80px) scale(1);
            transform: translateX(-80px) scale(1);
            opacity: 0.2;
        }

        100% {
            -webkit-transform: translateX(-120px) scale(1);
            transform: translateX(-120px) scale(1);
            opacity: 0.05;
        }
    }

    /*雨 RAINY */
    .rainy {
        background: currentColor;
        border-radius: 50%;
        position: absolute;
        left: 90px;
        top: 20px;
        z-index: 10;
        width: 50px;
        height: 50px;
        margin: -29.5px;
        margin-left: 350px;
        box-shadow: -35px 11px 0 -8px, 31px 13px 0 -10px, 0 0 0 6px #ffff,
            -35px 11px 0 -2px #ffffff, 31px 13px 0 -4px #ffffff;
    }

    .rainy:after {
        background: currentColor;
        content: "";
        height: 20px;
        width: 65px;
        z-index: 10;
        position: absolute;
        left: -10px;
        bottom: -3px;
        box-shadow: 0 7px 0 -1px #fff;
    }

    .rain {
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        margin: 2px 0 0 -32px;
        background: currentColor;
    }

    .rain:after {
        content: "";
        position: absolute;
        z-index: 30;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 18px;
        margin: -16px 0 0 -4px;
        background: #0cf;
        border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
        box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2),
            -14px 18px 0 -2px rgba(255, 255, 255, 0.2),
            -22px -2px 0 rgba(255, 255, 255, 0.2);
        transform: rotate(-28deg);
        animation: rainy_rain 3s linear infinite;
    }

    @-webkit-keyframes rainy_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 rainy_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;
        }
    }

    /* SNOWY */
    .snowy {
        background: currentColor;
        border-radius: 50%;
        position: absolute;
        left: 90px;
        top: 20px;
        z-index: 10;
        width: 50px;
        height: 50px;
        margin: -29.5px;
        margin-left: 520px;
        box-shadow: -35px 11px 0 -8px, 31px 13px 0 -10px, 0 0 0 6px #ffff,
            -35px 11px 0 -2px #ffffff, 31px 13px 0 -4px #ffffff;
    }

    .snowy:after {
        background: currentColor;
        content: "";
        height: 20px;
        width: 65px;
        z-index: 10;
        position: absolute;
        left: -10px;
        bottom: -3px;
        box-shadow: 0 7px 0 -1px #fff;
    }

    .snow1 {
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        margin: 6px 0 0 -32px;
        background: currentColor;
    }

    .snow1:after {
        content: "";
        position: absolute;
        z-index: 30;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 18px;
        margin: -16px 0 0 4px;
        background: url("./image/snow.png") no-repeat center;
        background-size: 100% 100%;
        animation: snowy 8s linear infinite;
    }

    .snow1:before {
        content: "";
        position: absolute;
        z-index: 30;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        margin: 0px 0 0 3px;
        background: url("./image/snow.png") no-repeat center;
        background-size: 100% 100%;
        animation: snowy2 8s linear infinite;
    }

    .snow2:after {
        content: "";
        position: absolute;
        z-index: 30;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        margin: 15px 0 0 -16px;
        background: url("./image/snow.png") no-repeat center;
        background-size: 100% 100%;
    }

    .snow2:before {
        content: "";
        position: absolute;
        z-index: 30;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin: 30px 0 0 -30px;
        background: url("./image/snow.png") no-repeat center;
        background-size: 100% 100%;
        animation: snowy 8s linear infinite;
    }

    @-webkit-keyframes snowy {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes snowy {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes snowy2 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    @keyframes snowy2 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    /* 雷阵雨*/
    .thundery {
        background: currentColor;
        border-radius: 50%;
        position: absolute;
        left: 90px;
        top: 20px;
        z-index: 10;
        width: 50px;
        height: 50px;
        margin: -29.5px;
        margin-left: 700px;
        box-shadow: -35px 11px 0 -8px, 31px 13px 0 -10px, 0 0 0 6px #ffff,
            -35px 11px 0 -2px #ffffff, 31px 13px 0 -4px #ffffff;
    }

    .thundery:after {
        background: currentColor;
        content: "";
        height: 20px;
        width: 65px;
        z-index: -10;
        position: absolute;
        left: -10px;
        bottom: -3px;
        box-shadow: 0 7px 0 -1px currentColor;
    }

    .thunder1 {
        position: absolute;
        z-index: 50;
        top: 50%;
        left: 50%;
        margin: 1px 0 0 -20px;
        background: currenretColor;
        border-top: 14px solid currentColor;
        border-right: 8px solid rgba(255, 255, 255, 0.2);
        border-bottom: 14px solid rgba(255, 255, 255, 0.2);
        border-left: 8px solid currentColor;
        transform: skewX(-15deg);
        animation: thunder_lightning 3s linear infinite;
    }

    .thunder1:before {
        content: "";
        position: absolute;
        z-index: 30;
        top: 50%;
        left: 50%;
        background: currentColor;
        margin: 8px 0 0 8px;
        border-top: 14px solid rgba(255, 255, 255, 0.2);
        border-right: 8px solid currentColor;
        border-bottom: 14px solid currentColor;
        border-left: 8px solid rgba(255, 255, 255, 0.2);
        animation: thunder_lightning 3s linear infinite;
    }

    .thunder2 {
        position: absolute;
        z-index: 50;
        top: 140%;
        left: 40%;
        width: 18px;
        height: 18px;
        margin: -16px 0 0 -4px;
        border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
        box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        transform: rotate(-28deg);
        animation: small_rainy_rains 3s linear infinite;
    }

    @-webkit-keyframes small_rainy_rains {
        0% {
            box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        }

        25% {
            box-shadow: 10px 14px 0 -2px #0cf;
        }

        50% {
            box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        }

        100% {
            box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        }
    }

    @keyframes small_rainy_rains {
        0% {
            box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        }

        25% {
            box-shadow: 10px 14px 0 -2px #0cf;
        }

        50% {
            box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        }

        100% {
            box-shadow: 10px 14px 0 -2px rgba(255, 255, 255, 0.2);
        }
    }

    @-webkit-keyframes thunder_lightning {
        0% {
            background: rgba(255, 255, 255, 0.3);
        }

        5% {
            background: rgb(0, 204, 255);
        }

        15% {
            background: rgba(255, 255, 255, 0.3);
        }

        50% {
            background: rgba(255, 255, 255, 0.6);
        }

        100% {
            background: rgba(255, 255, 255, 0.3);
        }
    }

    @keyframes thunder_lightning {
        0% {
            background: rgba(255, 255, 255, 0.3);
        }

        5% {
            background: rgb(0, 204, 255);
        }

        15% {
            background: rgba(255, 255, 255, 0.3);
        }

        50% {
            background: rgba(255, 255, 255, 0.6);
        }

        100% {
            background: rgba(255, 255, 255, 0.3);
        }
    }

    @-webkit-keyframes thunder_lightning2 {
        0% {
            background: rgba(255, 255, 255, 0.3);
        }

        15% {
            background: rgb(0, 204, 255);
        }

        30% {
            background: rgba(255, 255, 255, 0.3);
        }

        45% {
            background: rgb(0, 204, 255);
        }

        75% {
            background: rgba(255, 255, 255, 0.6);
        }

        100% {
            background: rgba(255, 255, 255, 0.3);
        }
    }

    @keyframes thunder_lightning2 {
        0% {
            background: rgba(255, 255, 255, 0.3);
        }

        15% {
            background: rgb(0, 204, 255);
        }

        30% {
            background: rgba(255, 255, 255, 0.3);
        }

        45% {
            background: rgb(0, 204, 255);
        }

        75% {
            background: rgba(255, 255, 255, 0.6);
        }

        100% {
            background: rgba(255, 255, 255, 0.3);
        }
    }

 

不爱吃鱼的L猫
关注
专栏目录
CSS3实现动态天气小图标特效.zip
07-04
CSS3实现动态天气小图标特效是一款纯CSS3实现的天气出太阳，下雨，雷阵雨等动画图标特效代码。
css3实现天气图标特效代码
03-20
在这个“css3实现天气图标特效代码”的项目中，我们将探讨如何利用CSS3来创建涂鸦式的天气图标，并实现动态效果。 首先，要理解CSS3的关键帧动画（@keyframes）是实现这种动态效果的核心。通过定义动画的不同阶段，...
分享一组纯css动态好看的天气图标
u011053926的博客
02-28 836
CSS代码比较多，不过比用js写好多了。里面的颜色可以自行更换，动画效果也可以自己发挥。都是带有css3动画的，下面直接上代码。
白骑士的CSS教学实战项目篇 6.4 动态天气应用的CSS设计
JeremyTC的博客
09-07 266
设计一个动态天气应用的CSS涉及许多方面，包括界面的美观、信息的清晰展示和用户体验的优化。本文将详细讲解如何通过CSS设计一个功能齐全且视觉吸引的天气应用界面。
纯css天气图
accumulate_的博客
11-18 266
.weather { position: relative; display: inline-block; width: 180px; height: 240px; background: #23b7e5; border-radius: 8px; } .sunny:before { content: ""; position: absolute; top: 50%; left: 50%; transform: trans
css画天气
qq_41974199的博客
11-21 328
css画天气 太阳 // css画太阳 <view class="weather"> <view class="sun"> <view class="raw"></view> <view class="raws"></view> </vie...
纯css3天气动画场景特效
weixin_33830216的博客
01-17 135
CSS3超强大，以下是纯用CSS3+HTML实现的场景效果图： 查看效果：http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate（）介绍与简单实现 参考：http://hovertree.com/h/bjaf/5cl7svum.htm 更多：http://www.cnblogs.com/roucheng/p/texiao.htm...
CSS绘制天气
小小少年
02-26 598
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
css3实现天气图标 css3实现天气图标代码下载.zip
11-17
此资源“css3实现天气图标 css3实现天气图标代码下载.zip”提供了一种利用CSS3技术来创建天气图标的示例。下面我们将详细探讨如何使用CSS3来实现这一功能，以及涉及的相关前端技术。 首先，CSS3引入了许多新的选择...
如何利用CSS3实现天气图标的动画过渡？
最新发布
10-22
利用 CSS3 实现天气图标动画过渡主要是通过 `@keyframes` 规则，它可以让你定义一系列关键帧，描述元素如何随时间变化。对于天气图标动画，你可能想要创建一个循环的旋转效果，让图标看起来像是在动态显示。 首先，...
CSS3实现动态天气小图标特效特效代码
03-20
【CSS3实现动态天气小图标特效】是一种利用CSS3的强大功能来创建互动式的、具有视觉吸引力的天气图标的方法。在现代网页设计中，动态元素能够为用户带来更丰富的体验，而这种天气图标特效则能够以一种优雅的方式展示...
HTML5 css3天气图标动画版.rar
07-10
HTML5 css3实现动态的天气预报图标，动画效果也是一大亮点，图标不但是CSS3生成的，还加入了生动的图标动画，做一些移动设备的天气应用非常合适。
CSS3天气预报动画图标
08-23
今天我们要来分享一款很不错的CSS3天气预报动画图标，图标表示了晴、多云、阴、雨、雷阵雨、雪这6种天气情况，并且每一个图标都带有动画，非常生动地描述了当前的天气状况。关于天气预报，也可以看看这款纯CSS3天气动画图标。
纯CSS3实现7种扁平天气图标.zip
07-04
纯CSS3实现7种扁平天气图标是一款纯CSS3制作的7种扁平天气图标动画效果代码。
css3实现天气图标.zip
07-04
【标题】：“CSS3实现天气图标.zip”是一个包含利用CSS3技术制作的动态天气图标的资源包。这个压缩文件提供了一种纯CSS3的方式，来创建具有涂鸦风格的天气图标，无需依赖JavaScript或其他图像处理工具，使得网页设计...
HTML、CSS和JavaScript实现简单天气预报
m0_63359528的博客
05-21 5852
首先需要获取天气API的数据，可以通过向第三方天气数据服务商发送HTTP请求来获取数据。上面的代码中，先定义了要获取天气数据的城市和API Key，在JavaScript中使用fetch方法发送HTTP请求，获取数据后再使用DOM操作将数据渲染到HTML页面上对应的元素中。接着，将获取到的天气数据动态地展示在HTML页面上。可以使用JavaScript的DOM操作方法，将获取到的数据渲染到页面上指定的位置。最后，为了美化界面，可以使用CSS对整个天气预报页面进行样式设置。
纯css实现乌云密布的天气图标
wendZzoo的博客
09-16 403
阴天，在不开灯的房间，当所有思绪都一点一点沉淀，爱情究竟是精神鸦片，还是世纪末的无聊消遣。
纯CSS3动态天气图标动画js特效
ICode联盟
10-23 326
下载地址 纯CSS3动态天气图标动画特效是一款基于css3属性绘制各种动态的天气预报图标动画特效。 dd:
开脑洞系列——CSS3版天气预报
weixin_39204527的博客
01-08 571
开脑洞系列——CSS3版天气预报 装B指南 本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。 装B技巧 本文所有图形都会有个容器 包裹
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值