api显示全球当前城市7天内天气预报效果代码
代码语言:html
所属分类:其他
代码描述:api显示全球当前城市7天内天气预报效果代码
代码标签: api 显示 全球 当前 城市 7天内 天气 预报
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Lato"); @font-face { font-family: 'Weather-Icons'; font-style: normal; font-weight: normal; src: url("https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/font/weathericons-regular-webfont.ttf"); } body { overflow: hidden; padding: 0; margin: 0; color: #fff; font-family: 'Lato', sans-serif; font-style: normal; font-weight: normal; font-size: 18px; } .wrapper { background-color: #353535; display: flex; flex-flow: column nowrap; justify-content: center; height: 100vh; text-align: center; } .wrapper .today { flex: 1; } .wrapper .today #city { color: #888; margin: 0.1rem; } .wrapper .today .weatherInfo { display: flex; flex-flow: row wrap; justify-content: center; } .wrapper .today .weatherInfo #weatherIcon { font-size: 10vh; height: 10vh; } .wrapper .today .weatherInfo #weatherIcon:after { font-family: 'Weather-Icons'; content: attr(data-icon); } .wrapper .today .weatherInfo #forecast { align-self: flex-end; margin: 0.5rem 1rem; } .wrapper .today .temperature-wrapper { display: flex; justify-content: center; } .wrapper .today #temperature { font-size: 28vh; position: relative; } .wrapper .today #temperature #metrics { position: absolute; top: -0.3em; right: -0.3em; font-size: 13vh; } .wrapper .today #temperature #metrics:hover { color: #90ee90; } .wrapper .today #temperature #metrics:after { font-family: 'Weather-Icons'; content: attr(data-icon); } .wrapper .daily { display: flex; flex-direction: column; justify-content: center; } .wrapper .daily .low-high { font-size: 1rem; color: #fff; display: flex; flex-direction: row; justify-content: center; align-items: center; } .wrapper .daily .low-high .low #low { color: #0f88ff; } .wrapper .daily .low-high .high #high { color: #f95757; } .wrapper .daily .low-high span { display: block; font-size: 0.75rem; color: #888; } .wrapper .daily .low-high .temperature-range { width: 60vw; height: 2vh; margin: 0 1rem; max-width: 350px; background: linear-gradient(to right, #0f88ff 0%, #2989d8 10%, #207cca 20%, #207cca 30%, #ce6fc0 58%, #f95757 100%); border-radius: 20px; } .wrapper .daily .currently { display: flex; flex-direction: row; justify-content: center; } .wrapper .daily .currently .icon-wrapper { color: #888; display: flex; align-items: center; margin: 0 0.5rem; } .wrapper .daily .currently .icon-wrapper .metric-text { margin: 0 0.3rem; font-size: 0.75rem; } .wrapper .daily .currently .icon-wrapper .wind:after { font-family: 'Weather-Icons'; content: attr(data-icon); } .wrapper .daily .currently .icon-wrapper .rain:after { font-family: 'Weather-Icons'; content: attr(data-icon); } .wrapper .daily .currently .icon-wrapper .humi:after { font-family: 'Weather-Icons'; content: attr(data-icon); } .wrapper .week { color: #888; flex: 1; display: flex; justify-content: center; align-items: center; } .wrapper .week .day { margin: 0 0.2rem; } .wrapper .week .day .day-low-high { font-size: 0.75rem; } .wrapper .week .day .day-icon:after { color: #888; font-family: 'Weather-Icons'; content: attr(data-icon); } .wrapper .made-by { color: #888; margin-bottom: 0.1rem; font-size: 0.75rem; } .wrapper .made-by a { text-decoration: none; color: #0f88ff; } .wrapper .made-by a:visited { color: #f95757; } .wrapper .made-by a:hover { text-decoration: underline; } </style> </head> <body > <div class="wrapper"> <div class="today"> <div id="city">Default, DE</div> <div class="weatherInfo"> <div id="weatherIcon" data-icon=""></div> <div id="forecast">Stormy & Rainy</div> </div> <div class="temperature-wrapper"> <div id="temperature"> <div class="temp">100</div> <div id="metrics" data-icon=""></div> </div> </div> </div> <div class="daily"> <div class="low-high"> <div class="low"> <div id="low">12</div><span>Low</span> </div> <div class="temperature-range"></div> <div class="high"> <div id="high">22</div><span>High</span> </div> </div> <div class="currently"> <div class="icon-wrapper"> <div> <div class="wind" data-icon=""></div> <div class="metric-text">Wind</div> </div> <div class="metric-text" id="wind-text"></div> </div> <div class="icon-wrapper"> <div> <div class="rain" data-icon=""></div> <div class="metric-text">Rain</div> </div> <div class="metric-text" id="rain-text"> </div> </div> <div class="icon-wrapper"> <div> <div class="humi" data-icon=""></div> <div class="metric-text">Humidity</div> </div> <div class="metric-text" id="humi-text"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0