分享一组天气组件

这篇具有很好参考价值的文章主要介绍了分享一组天气组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看效果:
分享一组天气组件,CSS,javascript,css,前端
CSS部分代码(查看更多):文章来源地址https://www.toymoban.com/news/detail-645994.html

    <style>
        :root {
            --bg-color: #E9F5FA;
            --day-text-color: #4DB0D3;

            /* 多云 */
            --cloudy-background: #4DB0D3;
            --cloudy-temperature: #E6DF95;
            --cloudy-content: #D3EBF4;

            /* 晴 */
            --sunny-background: #E6DF95;
            --sunny-temperature: #4DB0D3;
            --sunny-content: #247490;

            /* 暴风雨 */
            --stormy-background: #0E2E3A;
            --stormy-temperature: #E6DF95;
            --stormy-content: #D3EBF4;

            /* 雪 */
            --snowy-background: #BCE1EF;
            --snowy-temperature: #0E2E3A;
            --snowy-content: #247490;

            /* 雨 */
            --rainy-background: #4DB0D3;
            --rainy-temperature: #E6DF95;
            --rainy-content: #D3EBF4;

            /* 部分多云 */
            --partly-cloudy-background: #2B8BAD;
            --partly-cloudy-temperature: #E6DF95;
            --partly-cloudy-content: #D3EBF4;
        }


        * {
            box-sizing: border-box;
            color: var(--mine-shaft);
            font-family: 'Krona One', sans-serif;
            margin: 0;
            padding: 0;
        }

        body {
            align-items: center;
            background: var(--bg-color);
            display: flex;
            justify-content: center;
            min-height: 100vh;
            padding: 1rem;
        }

        .main {
            display: flex;
            gap: 36px;
            justify-content: center;
            max-width: 100%;
            width: 1440px;
        }

        .item {
            display: flex;
            flex-direction: column;
            flex: 1;
            max-width: 165px;
        }

        .item__date {
            color: var(--day-text-color);
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 0.2em;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
        }

        .item__day {
            color: var(--day-text-color);
            font-size: 73px;
            font-weight: 400;
            line-height: 92px;
            margin-bottom: 14px;
            text-align: center;
        }

        .item__forecast-container {
            align-items: center;
            border-radius: 50px;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 11px 4px 34px rgba(32, 77, 92, 0.7);
            display: flex;
            flex-direction: column;
            min-height: 525px;
            padding-bottom: 14px;
            padding-top: 16px;
        }

        .item__forecast-image {
            flex: 1;
            position: relative;
            width: 100%;
        }

        .item__forecast-value {
            font-family: 'Oswald', sans-serif;
            font-size: 110px;
            font-weight: 400;
            line-height: 163px;
            margin-bottom: 27px;
            position: relative;
        }

        .item__forecast-value::before {
            border: 5px solid currentColor;
            border-radius: 50%;
            content: '';
            height: 10px;
            position: absolute;
            right: -22px;
            top: 22px;
            width: 10px;
        }

        .item__forecast-precipitation,
        .item__forecast-low {
            align-items: center;
            display: flex;
            font-size: 16px;
            font-weight: 400;
            gap: 8px;
            line-height: 20px;
            margin-bottom: 10px;
        }

        /* 多云 */
        .cloudy .item__forecast-container {
            background-color: var(--cloudy-background);
        }

        .cloudy .item__forecast-value {
            color: var(--cloudy-temperature);
        }

        .cloudy .item__forecast-precipitation,
        .cloudy .item__forecast-low {
            color: var(--cloudy-content);
        }

        .cloudy .item__forecast-image {
            left: 15px;
            width: 264px;
        }

        /* 晴天 */
        .sunny .item__forecast-container {
            background-color: var(--sunny-background);
        }

        .sunny .item__forecast-value {
            color: var(--sunny-temperature);
        }

        .sunny .item__forecast-precipitation,
        .sunny .item__forecast-low {
            color: var(--sunny-content);
        }

        .sunny .item__forecast-image {
            width: 208px;
        }

        /* 暴雨 */
        .stormy .item__forecast-container {
            background-color: var(--stormy-background);
        }

        .stormy .item__forecast-value {
            color: var(--stormy-temperature);
        }

        .stormy .item__forecast-precipitation,
        .stormy .item__forecast-low {
            color: var(--stormy-content);
        }

        .stormy .item__forecast-image {
            left: 18px;
            width: 246px;
        }

        /* 雪天 */
        .snowy .item__forecast-container {
            background-color: var(--snowy-background);
        }

        .snowy .item__forecast-value {
            color: var(--snowy-temperature);
        }

        .snowy .item__forecast-precipitation,
        .snowy .item__forecast-low {
            color: var(--snowy-content);
        }

        .snowy .item__forecast-image {
            left: 6px;
            width: 230px;
        }

        /* 部分多云 */
        .partly-cloudy .item__forecast-container {
            background-color: var(--partly-cloudy-background);
        }

        .partly-cloudy .item__forecast-value {
            color: var(--partly-cloudy-temperature);
        }

        .partly-cloudy .item__forecast-precipitation,
        .partly-cloudy .item__forecast-low {
            color: var(--partly-cloudy-content);
        }

        .partly-cloudy .item__forecast-image {
            left: 14px;
            width: 230px;
        }

        /* 雨天 */
        .rainy .item__forecast-container {
            background-color: var(--rainy-background);
        }

        .rainy .item__forecast-value {
            color: var(--rainy-temperature);
        }

        .rainy .item__forecast-precipitation,
        .rainy .item__forecast-low {
            color: var(--rainy-content);
        }

        .rainy .item__forecast-image {
            left: 25px;
            top: -30px;
            width: 160px;
        }

    </style>

到了这里,关于分享一组天气组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(54)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(57)
  • 前端(html+css+javascript)作业--展现家乡的网页

    期末期间,老师布置了前端作业,现在放到这里,给各位同志参考。 桂平市是广西壮族自治区的一个美丽的城市,拥有丰富的历史文化和自然景观,属于贵港市管辖,那为什么是看起来是市级而不是县级,其实他就是个 市级县,比县大一些人口多一些就叫做市了。 此网页不

    2024年01月17日
    浏览(48)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(50)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(52)
  • 【前端】javascript+html+css 家具销售网站(代码+报告)

    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化【获取源码+商业合作】 👉荣__誉👈:阿里云博客专家博主、51CTO技术博主 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。 整个网页在头部部分,定义了字符编码、

    2024年02月14日
    浏览(46)
  • Web前端大作业制作个人网页(html+css+javascript)

    🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。 ⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页

    2024年02月10日
    浏览(53)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(73)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(55)
  • 前端 富文本编辑器原理——从javascript、html、css开始入门

    大家好,我是yma16,本文分享关于前端 富文本编辑器原理——从javascript、html、css开始。 富文本编辑器 富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器 参考文档:https://w3c.github.io/selection-api/#abstract 全局属性 contenteditable 是一个枚举属性,表示元素是否可被用

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包