使用javascript、Ajax制作前端拟态风格天气预报功能

最新推荐文章于 2024-08-15 14:03:25 发布
最新推荐文章于 2024-08-15 14:03:25 发布
阅读量501 收藏 2
点赞数
分类专栏： Web前端开发 文章标签： js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiomarazark/article/details/113823870
版权
博主通过javascript和Ajax技术创建了一个拟态风格的天气预报功能。项目包含weather.html、weather.css、weathericon.css和iconfont.css四个文件，其中weather.js负责实现动态效果，weathericon.css用于绘制天气图标，iconfont.css则是字体样式。展示了一款具有视觉吸引力的天气信息展示板块。
摘要由CSDN通过智能技术生成

weather.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/weather.css">
    <link rel="stylesheet" href="css/weathericon.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <title>Document</title>
</head>
<body>
    <!--    今日天气    -->
    <div class="information"></div>
    <!--    天气预报    -->
    <div class="forecast"> </div>
    <!-- 搜狐家查询ip地址的接口 -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="js/weather.js"></script>
</body>
</html>

weather.css

整个板块的样式

* {
   
    padding: 0;
    margin: 0;
}
/* 今日天气样式 */
.information {
   
    position: absolute;

}
.now {
   
    position: relative;
    left: 50px;
    top: 40px;
    width: 550px;
    height: 450px;
    border-radius: 50px;
    background: #e6eef4;
    box-shadow: 20px 20px 60px #c4cacf,
        -20px -20px 60px #ffffff;
}
/* 城市名字样式 */
.city {
   
    position: relative;
    left: 300px;
    top: 40px;
    font-size: 35px;
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    border-radius: 30px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
        -18px -18px 30px rgba(255, 255, 255, 1);
}
/* 今日天气样式 */
.text {
   
    position: relative;
    font-size: 30px;
    left: 310px;
    top: 70px;
    display: inline-block;
    width: 180px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
        -18px -18px 30px rgba(255, 255, 255, 1);
    border-radius: 30px;
}
/* 天气图标样式 */
.weatherDiv {
   
    position: relative;
    left: 70px;
    top: -60px;
    width: 150px;
    height: 150px;
    border-radius: 70px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
        -18px -18px 30px rgba(255, 255, 255, 1);
}
.weatherDiv:hover{
   
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
        0px 0px 0px rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
    transition: box-shadow .2s ease-out;
}
.weather{
   
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 天气信息样式 */
.container {
   
    width: 560px;
    position: relative;
    top: -50px;
}
/* 信息图标显示样式 */
.container .box {
   
    display: flex;
    float: left;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    align-content: center;
    width: 100px;
    height: 100px;
    margin: 20px;
}
.container .box .img {
   
    /* width: 100px; */
    width: 78px;
    height: 100px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
        -18px -18px 30px rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efeeee;
    transition: box-shadow .2s ease-out;
    position: relative;
}
.container .box .img:hover {
   
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
        0px 0px 0px rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
    transition: box-shadow .2s ease-out;
}
/* 天气预测样式 */
.forecast {
   
    position: relative;
    top: 550px;
    left: 70px;
    width: 500px;
    background-color: rgba(0, 0, 0, .3);
    margin: 0 0.2rem;
    border-radius: 20px;
}
.forecast-situation img{
   
    width: 30px;
    height: 30px;
}
.forecast-item {
   
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
.forecast-temp {
   
    line-height: 40px;
}

weathericon.css

这个部分的代码主要是用来制作天气图标

/* 所有的动画准备 */
/* 清除所有列表项的默认样式 */

li {
   
    list-style: none;
}

p {
   
    width: 100px;
    height: 150px;
    background: cadetblue;
    float: left;
    margin-right: 20px;
}

/* 进出动画 */
@keyframes inex {
   
    50% {
   
        opacity: 0.4;
    }

    60% {
   
        opacity: 1;
    }
}

/* 移动动画 */
@keyframes move {
   
    50% {
   
        transform: translateX(-10px);
    }
}

/* 降落动画 */
@keyframes fall {
   
    10% {
   
        opacity: 0.8;
    }

    50% {
   
        opacity: 1;
        transform: translate(-10px, 30px);
    }

    100% {
   
        transform: translate(-25px, 70px);
    }
}

/* 闪动动画 */
@keyframes flash {
   
    48% {
   
        background-color: #607d8b;
    }

    50% {
   
        background-color: #fff;
    }

    55% {
   
        background-color: #607d8b;
    }

    57% {
   
        background-color: #fff;
    }
}

/* 流星动画 */
@keyframes meteor {
   
    10% {
   
        opacity: 1;
    }

    80% {
   
        left: 10%;
        top: 75%;
        opacity: 0;
    }
}

/* 雾天 */
.fog {
   
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(to top right, #889ba8 0%, #c0cfd8 40%);
    box-shadow: 1px 1px 30px #515658;
}

.fog .cloud1 {
   
    position: absolute;
    right: 50px;
    top: 10px;
    box-shadow: 1px 1px 30px #0097a7;
    animation: move 3s infinite linear;
}

.fog .cloud1 li:nth-child(1) {
   
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 0;
    border-radius: 50%;
    background-color: #9bb6b6;
}

.fog .cloud1 li:nth-child(2) {
   
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;
    left: 10px;
    border-radius: 50%;
    background-color: #9bb6b6;
}

.fog .cloud1 li:nth-child(3) {
   
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 30px;
    border-radius: 50%;
    background-color: #9bb6b6;
}

.fog .cloud1 li:nth-child(4) {
   
    width: 40px;
    height: 10px;
    position: absolute;
    top: 10px;
    left: 5px;
    border-radius: 20%;
    background-color: #9bb6b6;
}

.fog .cloud2 {
   
    position: absolute;
    right: 80px;
    top: 15px;
    animation: move 3s infinite linear;
}

.fog .cloud2 li:nth-child(1) {
   
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    left: 0;
    border-radius: 50%;
    background-color: #9bb6b6;
}

.fog .cloud2 li:nth-child(2) {
   
    width: 40px;
    height: 40px;
    position: absolute;
    top: -10px;
    left: 15px;
    border-radius: 50%;
    background-color: #9bb6b6;
}

.fog .cloud2 li:nth-child(3) {
   
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    left: 40px;
    border-radius: 50%;
    background-color: #9bb6b6;
}

.fog .cloud2 li:nth-child(4) {
   
    width: 50px;
    height: 15px;
    position: absolute;
    top: 15px;
    left: 10px;
    border-radius: 20%;
    background-color: #9bb6b6;
}

.fog .fogs {
   
    position: absolute;
    right: 20px;
    top: 46px;
}

.fog .fogs li {
   
    width: 60px;
    height: 4px;
    animation: move 3s infinite linear;
    background: linear-gradient(135deg, transparent, transparent 45%, #9bb6b6, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #9bb6b6, transparent 55%, transparent 100%);
    background-size: 8px 8px;
    background-repeat: repeat-x, repeat-x;
}

/* 小雨 */
.light-rain {
   
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(to top right, #9ccc65 0%, #26c6da 50%);
    box-shadow: 1px 1px 30px #26c6da;
}

.light-rain .cloud {
   
    position: absolute;
    right: 60px;
    top: 15px;
}

.light-rain .cloud li:nth-child(1) {
   
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0px;
    left: 0;
    border-radius: 50%;
    background-color: #81d4fa;
}

.light-rain .cloud li:nth-child(2) {
   
    width: 35px;
    height: 35px;
    position: absolute;
    top: -10px;
    left: 15px;
    border-radius: 50%;
    background-color: #81d4fa;
}

.light-rain .cloud li:nth-child(3) {
   
    width: 25px;
    height: 25px;
    position: absolute;
    top:
最低0.47元/天 解锁文章
VantageCesar
关注
专栏目录
【web前端特效源码】使用HTML5+CSS3制作一个新拟态图标动画效果~~适合初学者~超简单~ |前端开发
南北极之间
08-29 754
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个新拟态图标动画效果~适合初学者~超简单~ |前端开发|IT软件 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！本人承接网网站开发，如有需要，欢迎私信咨询！如果您感觉文章对您有帮助~ 那就打赏一下，请笔者喝杯咖啡吧~对于每个学生来说，从高中到大学的过渡面孔有点棘手，因为他的生活正在发生不断的变化。他们应该在经济上和社
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
南北极之间
08-19 750
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！本人承接网网站开发，如有需要，欢迎私信咨询！如果您感觉文章对您有帮助~ 那就打赏一下，请笔者喝杯咖啡吧~对于每个学生来说，从高中到大学的过渡面孔有点棘手，因为他的生活正在发生不断的变化。他们应该在经济上和社会上独立，并在生活中做出非常关键的改变。他们的目标被赚更多钱的冲动所取代，因为他们对成功的定义发生了变化，职业建议不再意味着追随他们的梦想和快乐。大学不是一个教你如何在职业建议工作的地方;这是生命的一个阶段，给你关于生命的教训。你可能会看到一扇巨
天气预报前端
05-21
微信小程序，前端，天气预报小程序，学习使用，请勿使用在工程上
原生js、Ajax编写一个天气预报，搜索查询
weixin_43400431的博客
08-03 3207
今天分享的是Ajax，使用Ajax的步骤： 1、创建对象 2、创建请求 3、发送请求参数 4、接收响应 接下来是准备工作，可以搜索高德地图开放平台-Web服务API-天气查询。 天气查询是一个简单的HTTP接口，根据用户输入的adcode，查询目标区域当前/未来的天气情况。 使用API前您需先申请Key，若无高德地图API账号需要先申请账号。 里面有请求方式和参数，key是要自己申请的 好的，到这里就开始上代码了咯 HTML： <html> <head> <meta
【Cesium】Vue天气（雨、雪、雾）效果(完整代码)
最新发布
weixin_43180565的博客
08-15 907
Cesium 提供了丰富的技术和工具，可以实现各种天气效果。通过将实时天气数据可视化在地球上，并结合粒子系统、着色器和光照效果，可以营造出逼真和生动的天气场景。这些天气效果可以用于气象领域的数据可视化、游戏开发等应用中。
js制作动态天气预报
01-21
javascript动态天气预报，让页面上的天气预报更形象，更生动
用AJAX制作天气预
weixin_30765319的博客
12-13 138
　index.html <script type="text/javascript" language="javascript" src="weather.js"></script> <A HREF="http://www.webjx.com"> <img src="logo.gif" BORDER="0"> </A> <br /...
利用AJAX做天气预报
weixin_47250504的博客
06-27 2656
天气预报一、添加Jquery事件、方法二、HTML主体部分三、运行结果 上一周我们初步学习了AJAX的概念。 这一周我们可以利用AJAX尝试着做一个天气预报界面。 一、添加Jquery事件、方法 document.addEventListener('plusready', function(){}); $(document).ready(function() { $("button").click(function() { var city = $("#city").val();
基于PHP开发的拟态风格的简约API管理系统源码+使用说明.zip
10-26
基于PHP开发的拟态风格的简约API管理系统源码+使用说明.zip 使用说明 所有的API在 **main.json** 这个文件中编辑 采用的Json形式保存你的API，并用于展示 我在main.json中写了几个例子，方便理解 目录：api/...
新拟态风格设计的网页
07-30
新拟态（Neumorphism）风格的设计，是近年来在网页设计领域中兴起的一种潮流，它融合了扁平化设计和拟物化设计的特点，形成了一种独特的视觉效果。这种设计风格以其柔和、立体且不失简洁的特性，为用户带来了全新的...
AJAX技术来实现天气预报功能
10-01
AJAX技术来实现天气预报功能
原生JS实现天气预报
11-20
本文实例为大家分享了JS实现天气预报的具体代码，供大家参考，具体内容如下 HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
js+html 日历和天气预报
12-03
本人从网上搜到的一些东西， 经过整合，成了现在的样子。 我是把直接它放在了C:\windows下，然后 在桌面上右键 属性->桌面->自定义桌面->web->新建->C:\windows\wannianli.html 就Ok了！ 很实用。
Ajax天气预报案例（使用模板引擎渲染）.zip
03-23
jquery中Ajax的使用，跨域使用接口查询各地天气预报，详细流程注释，简单易懂，以及模板引擎templ-web的简单运营，免去拼接字符串的繁琐-（需要修改接口appkey后才能使用）
js 获取当天的天气预报、城市、时间
12-15
简单的代码 获取当前所在城市 、天气 、时间
JavaScript 天气预报
dczjn9698的博客
11-01 233
var localStorage= new Object();localStorage.cityId='';function getWeather(){if(!localStorage.cityId){var cityId='';var userLatLng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());v...
前端天气预报功能
sun_qqq的博客
02-08 2760
平时经常百度天气情况，于是给自己的博客做了一个获取天气预报的功能
php ajax天气预报,一个超简单的基于jQuery ajax的天气预报Demo
weixin_42342010的博客
04-04 447
1 2 3 4 5 天气6 7 8 9 最新天气实况10 城市：11 日期：12 天气：13 当前气温：14 风向：15 最高气温：16 ...
写一个新拟态风格的css进度条 包括前端
03-29
``` <div class="progress"></div> ``` CSS样式： ...我们首先创建了一个进度条的容器，它的宽度为100%，高度为10px，背景颜色为#...最后我们只需要通过 JavaScript 控制 progress 容器的宽度即可实现进度条的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值