用HTML+css制作一个动态的天气图标

已于 2022-06-22 16:10:53 修改
阅读量1.7k 收藏 11
点赞数 5
文章标签： HTML CSS 动画效果 天气图标 前端开发
于 2022-06-11 11:23:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71170351/article/details/125232536
版权

前言

本文讲解用HTML+css制作一个动态的天气图标，如果觉得对你有帮助请关注小编，你的支持就是我更新的动力！

成品展示：

本程序是一个动态的
在这里插入图片描述

一、HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯css实现简约的天气图标动画特效</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <!-- 晴天 -->
        <div class="sunny">
            <div class="sun">
                <div class="rays"></div>
            </div>
        </div>
        <!-- 雨天 -->
        <div class="rainy">
            <div class="cloud"></div>
            <div class="rain"></div>
        </div>
        <!-- 多云 -->
        <div class="cloudy">
            <div class="cloud"></div>
            <div class="cloud"></div>
        </div>
    </div>
</body>
</html>

二、css部分

/* 初始化 */
*{
    margin: 0;
    padding: 0;
}

body{
    /* 100%的窗口高度 */
    height: 100vh;
    /* 弹性布局 水平 + 垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 自定义属性 (变量) 通过 var函数进行调用 */
    --bg-color:#161616;
    background-color: var(--bg-color);
}

.container{
    width: 700px;
    display: flex;
    /* 让两个div中间距离相等 */
    justify-content: space-around;
}

/* 晴 */
.sunny{
    /* 相对定位 */
    position: relative;
    width: 100px;
    height: 100px;
    /* 弹性布局 水平 + 垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 太阳 */
.sunny .sun{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-color);
    box-shadow: 0 0 0 6px orange;
    /* 执行动画 :动画名  时长  线性的  无限次播放 */
    animation: sunny 10s linear infinite;
}

/* 光线 */
.sunny .sun .rays{
    /* 绝对定位 */
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 18px;
    background-color: yellow;
    box-shadow: 0 86px yellow;
    border-radius: 4px;
}

.sunny .sun .rays::before,
.sunny .sun .rays::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 18px;
    background-color: yellow;
    box-shadow: 0 86px yellow;
    border-radius: 4px;
    transform: rotate(60deg);    
    transform-origin: 50% 52px;
}
.sunny .sun .rays::before{
    transform: rotate(-60deg);    
}


/* 雨天 */
.rainy{
    position: relative;
    width: 100px;
    height: 100px;
    /* 弹性布局 水平 + 垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;    
}

/* 云朵 */
.rainy .cloud{
    width: 60px;
    height: 60px;
    /* --bg-color:red; */
    background-color: var(--bg-color);
    position: absolute;
    border-radius: 50%;
    box-shadow: -35px 11px 0 -11px var(--bg-color),
        33px 15px 0 -15px var(--bg-color),
        0 0 0 6px lightgray,
        -35px 11px 0 -5px lightgray,
        33px 15px 0 -9px lightgray;
}
/* 让云朵下边为直边 */
.rainy .cloud::after{
    content: "";
    width: 73px;
    height: 16px;
    background-color: var(--bg-color);
    box-shadow: 0 6px 0 0 lightgray;
    position: absolute;
    bottom: 0;
    left: -8px;
}

/* 雨滴背景范围 */
.rainy .rain{
    width: 60px;
    height: 60px;
    background-color: var(--bg-color);
    position: absolute;
    top: 55%;
    left: 20%;
}

/* 雨滴 */
.rainy .rain::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    background-color: #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);
    margin: -16px 0 0 -4px;
    /* 执行动画 */
    animation: rainy 2s linear infinite;
}

/* 多云 */
.cloudy{
    position: relative;
    width: 100px;
    height: 100px;
    /* 弹性布局 水平 + 垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;      
}

/* 云朵 */
.cloudy .cloud{
    z-index: 1;
    width: 60px;
    height: 60px;
    /* --bg-color:red; */
    background-color: var(--bg-color);
    position: absolute;
    border-radius: 50%;
    box-shadow: -35px 11px 0 -11px var(--bg-color),
    33px 15px 0 -15px var(--bg-color),
    0 0 0 6px lightgray,
    -35px 11px 0 -5px lightgray,
    33px 15px 0 -9px lightgray;
}

/* 让云朵下边为直边 */
.cloudy .cloud::after{
    content: "";
    width: 73px;
    height: 16px;
    background-color: var(--bg-color);
    box-shadow: 0 6px 0 0 lightgray;
    position: absolute;
    bottom: 0;
    left: -8px;
}

/* 小云朵 */
.cloudy .cloud:nth-child(2){
    z-index: 0;
    background-color: #fff;
    box-shadow: -35px 11px 0 -11px #fff,
    33px 15px 0 -15px #fff,
    0 0 0 6px #fff,
    -35px 11px 0 -5px #fff,
    33px 15px 0 -9px #fff;
    opacity: 0.3;
    transform: scale(0.5) translate(96px,-48px);
    /* 执行动画 */
    animation: cloudy 3s linear infinite;
}
/* 小云朵的下面 */
.cloudy .cloud:nth-child(2)::after{
    background-color: #fff;
}



/* 定义一个动画 */
/* 太阳 */
@keyframes sunny{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}

/* 雨滴 */
@keyframes rainy{
    0%{
        background-color: #0cf;
        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);
    }
    25%{
        box-shadow:  10px 14px 0 -2px rgba(255, 255, 255, 0.2),
            -14px 18px 0 -2px #0cf,
            -22px -2px 0 rgba(255, 255, 255, 0.2);
    }
    50%{
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow:  10px 14px 0 -2px #0cf,
            -14px 18px 0 -2px rgba(255, 255, 255, 0.2),
            -22px -2px 0 rgba(255, 255, 255, 0.2);
    }
    100%{
        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 #0cf;
    }
}

/* 小云朵浮动 */
@keyframes cloudy{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0.3;
    }
    100%{
        opacity: 0;
        transform: scale(0.5) translate(-200%,-48px);
    }
}

关注我

在这里插入图片描述

柒小莫
关注
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
努力是为了站在万人之中，成为别人的光
07-25 4万+
今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源 第 2 步 - 从 index.html 开始 第 3 步 - 设置索引文件的样式 第 4 步 - 获取 Weather API 和 Unsplash API 密钥 第 5 步 - 从 JavaScript 编码开始 第 6 步 - 免费托管您的网站！
纯CSS3 animation制作扁平风格动态天气图标效果
12-13
在本项目中，我们探索了如何使用纯CSS3 Animation技术创建一套扁平风格的动态天气图标。CSS3 Animation是现代Web设计中一个强大的工具，它允许开发者通过关键帧动画为网页元素添加丰富的视觉效果，无需依赖...
iframe缩放大小
09-13
iframe缩放大小
iframe使里面页面内容缩放
qq_39321304的博客
11-06 2572
【代码】iframe使里面页面内容缩放。
HTML5实现好看的天气预报网站源码
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
07-18 2420
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
m0_65607651的博客
05-30 1166
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
HTML 天气插件
apple443322的博客
04-23 172
1.获取天气代码 http://tianqi.2345.com/plugin/ 2. 加入到页面中 <！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'MyJsp.jsp' starting ...
前端实现iframe响应式布局，让网页等比例缩放
qq_42822054的博客
07-29 8429
在项目开发中，有一种业务场景，很让人头疼，如何实现iframe响应式布局？ 简单说， 就是有这样一个需求，在一个小的页面下嵌套另一个网页，并且让所嵌套的网页以缩小的形式呈现，这种情况下应该怎么实现？ 初用iframe是下面的效果 <div class="box"> <iframe width="600" heig...
CSS3实现动态天气小图标特效特效代码
03-20
在实现这个特效的过程中，开发者通常会创建一个HTML结构，每个天气图标作为一个独立的元素，然后用CSS3来定义其样式和动画效果。代码可能包括选择器、属性和值的组合，如： ```css .weather-icon { width: 100px; ...
css3动态的天气图标特效
06-01
本话题将深入探讨如何利用CSS3来制作动态的天气图标特效。 首先，我们要明白CSS3中的关键帧动画（@keyframes）是实现这些天气图标动画的基础。通过定义动画的不同阶段，我们可以控制元素在一段时间内的变化，从而...
CSS3实现动态天气小图标特效.zip
11-17
在本项目"CSS3实现动态天气小图标特效.zip"中，我们主要探讨的是如何利用前端技术，特别是CSS3，来创建生动有趣的动态天气图标。这些图标不仅能够展示天气状况，如晴天、雨天、多云等，还能通过动画效果增强用户的...
iframe缩小引用网页比例代码
01-04
HTML使用iframe标签引用外部网页时，可以设置外部网页的显示比例适配当前iframe的大小，兼容各种浏览器哦
网页天气插件
08-09
一个动态的天气预报插件，自动根据ip获取本地的天气情况 ，有各种动画的天气演示，可用于网页开发里用到的天气模块
天气插件
12-23
各种天气，晴天，雨天，彩虹。等等等等都可以
web页面天气预报插件
06-20
web页面第三方天气预报插件
悬浮窗天气插件html,简单易懂的天气插件（代码分享）
weixin_35718575的博客
06-08 980
效果图如下：代码如下所示：天气.xc{width: 200px;margin: 0 auto;}(function(T, h, i, n, k, P, a, g, e) {g = function() {P = h.createElement(i);a = h.getElementsByTagName(i)[0];P.src = k;P.charset = "utf-8";P.async = 1;...
移动端中iframe缩放
unnndefined的博客
01-10 1万+
问题来源于此，需在移动端页面中嵌入iframe页面，如下图。 iframe页面属于PC页面，无视口缩放，而移动端页面有视口缩放iframe页面受此影响，也会出现放大问题： 取消预约 重新预约 取消预约重新预约 解决以上问题，可考虑引入transform的scale，在iframe加载完成后获取
html 天气插件,H5 实现天气效果(心知天气插件)
weixin_32267731的博客
06-04 1648
先上效果图鼠标移上去的效果展示核心代码如下：(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeathe...
如何在 html 中插入天气插件
热门推荐
雾隐雾现的至渝博客
05-11 2万+
背景         之前的方法图片形式对中文的支持不太好， 如何获取某个城市的天气小图标插入到自己的网页中，js 形式又有点缺陷，不知道为啥子，懒得弄，所以就换了一个心知天气的接口； 步骤 进入插件的自定义平台 https://www.seniverse.com/widgetv3，没有的话，先注册登录，选择控制台，新版插件。就能看到了，一般要让你先买个免费服务拿到 token 自定义的时候，如果你打算只放一个，而且固定在屏幕上，那浮动气泡加可展开是个不错的
使用html+css 绘制一个 信用卡
06-10
很好，让我来为您解答。 首先，我们需要使用HTML创建信用卡的基本结构。以下是一个示例代码： ```html <div class="credit-card"> <div class="credit-card__logo"></div> <div class="credit-card__number">1234 5678 9012 3456</div> <div class="credit-card__name">FULL NAME</div> <div class="credit-card__expiration"> <div class="credit-card__expiration-label">Expiration Date</div> <div class="credit-card__expiration-date">MM/YY</div> </div> </div> ``` 接下来，我们需要使用CSS来设计这个信用卡。以下是一个示例代码： ```css .credit-card { width: 400px; height: 250px; background-color: #fafafa; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; box-sizing: border-box; position: relative; } .credit-card__logo { width: 80px; height: 50px; background-image: url('credit-card-logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 20px; right: 20px; } .credit-card__number { font-size: 24px; font-weight: bold; letter-spacing: 4px; } .credit-card__name { font-size: 18px; font-weight: bold; text-transform: uppercase; } .credit-card__expiration { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .credit-card__expiration-label { font-size: 12px; font-weight: bold; color: #a9a9a9; } .credit-card__expiration-date { font-size: 18px; font-weight: bold; letter-spacing: 2px; } ``` 上面的CSS样式将为我们的信用卡添加样式，包括背景颜色，阴影，边框半径，文本样式和位置。 最后，我们只需要将HTML和CSS结合起来，就可以创建一个漂亮的信用卡了。如果您有自己的信用卡图标和样式，只需要将其替换为示例代码中的图标和样式即可。 希望这可以帮助您创建一个漂亮的信用卡！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柒小莫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值