CSS3動畫難嗎？從簡易的天氣動態圖標學習CSS3，

CSS3動畫難嗎？從簡易的天氣動態圖標學習CSS3，簡單易學很輕松

言

通知！通知！，去我的首頁轉發“抽獎活動” 可以參與抽獎（一塊抖音網紅手表）哦。

前面文章《CSS3線性漸變、陰影、縮放實現動畫下雨效果》實現了下雨的動畫效果，現在我們來繪制更多天氣相關的動態圖標。

css3簡易的天氣圖標動畫特效

上圖6種天氣，我們就分開一一展示給小伙伴們，希望能給大家帶來幫助。

晴朗

<div class="icon sunny"> 
 <div class="sun"> 
 <div class="rays"></div> 
 </div> 
</div>

sun標簽繪制圓環，rays及其偽類繪制射線，然后添加動畫，其實旋轉。

body { 
 background-color: currentColor; 
} 
 
.sun { 
 width: 2.5em; 
 height: 2.5em; 
 margin: -1.25em; 
 background: currentColor; 
 border-radius: 50%; 
 box-shadow: 0 0 0 0.375em orange; 
 animation: spin 12s infinite linear; 
} 
 
.rays { 
 position: absolute; 
 top: -2em; 
 left: 50%; 
 display: block; 
 width: 0.375em; 
 height: 1.125em; 
 margin-left: -0.1875em; 
 background: yellow; 
 border-radius: 0.25em; 
 box-shadow: 0 5.375em yellow; 
} 
 
.rays:before, .rays:after { 
 content: ''; 
 position: absolute; 
 top: 0em; 
 left: 0em; 
 display: block; 
 width: 0.375em; 
 height: 1.125em; 
 transform: rotate(60deg); 
 transform-origin: 50% 3.25em; 
 background: yellow; 
 border-radius: 0.25em; 
 box-shadow: 0 5.375em yellow; 
} 
.rays:before { 
 transform: rotate(120deg); 
} 
 
@keyframes spin { 
 100% { 
 transform: rotate(360deg); 
 } 
}

css3簡易的天氣圖標動畫特效

下雨

<div class="icon rainy"> 
 <div class="cloud"></div> 
 <div class="rain"></div> 
</div>

添加樣式

body { 
 background-color: currentColor; 
} 
.cloud { 
 position: absolute; 
 z-index: 1; 
 width: 3.6875em; 
 height: 3.6875em; 
 margin: -1.84375em; 
 background: currentColor; 
 border-radius: 50%; 
 box-shadow: 
 -2.1875em 0.6875em 0 -0.6875em, 
 2.0625em 0.9375em 0 -0.9375em , 
 0 0 0 0.375em lightgray, 
 -2.1875em 0.6875em 0 -0.3125em lightgray, 
 2.0625em 0.9375em 0 -0.5625em lightgray; 
}

css3簡易的天氣圖標動畫特效

這朵云是不是怪怪的，下邊應該是平整的，所以添加樣式。

.cloud:after { 
 content: ''; 
 position: absolute; 
 bottom: 0; 
 left: -0.5em; 
 display: block; 
 width: 4.5625em; 
 height: 1em; 
 background: currentColor; 
 box-shadow: 0 0.4375em 0 -0.0625em lightgray; 
}

css3簡易的天氣圖標動畫特效

這里繪制云，和《CSS3線性漸變、陰影、縮放實現動畫下雨效果》一樣的，都是用box-shadow陰影來制作的。

然后我們加入雨滴

... 
.rain{ 
 position: absolute; 
 z-index: 2; 
 top: 50%; 
 left: 20%; 
 width: 3.75em; 
 height: 3.75em; 
 margin: 0.375em 0 0 -2em; 
 background: currentColor; 
} 
 
.rain:after { 
 content: ''; 
 position: absolute; 
 z-index: 2; 
 top: 50%; 
 left: 50%; 
 width: 1.125em; 
 height: 1.125em; 
 margin: -1em 0 0 -0.25em; 
 background: #0cf; 
 border-radius: 100% 0 60% 50% / 60% 0 100% 50%; 
 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 rgba(255,255,255,0.2); 
 transform: rotate(-28deg); 
 animation: rain 3s linear infinite; 
} 
@keyframes 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; 
 } 
}

還有人記得《CSS3繪制一個小雨滴，見證它的成長之路》，其實很多東西都是一點點積累的過程，慢慢的拼湊，會得到不一樣的東西。

css3簡易的天氣圖標動畫特效

如果你對box-shadow動畫還不是很熟悉的，可以看這里《CSS3 box-shadow實現背景動畫》

家好，我是杰瑞，經常更新一些有趣實用的教程，喜歡的就請關注我吧！

天氣信息爬蟲

海南的天氣實在是熱得慌，杰瑞被外面燥熱的空氣“困”在了家里面，也不知道什么時候能下雨天氣涼爽一點，好讓我出去打打籃球跑跑步啥的，杰瑞也懶得去看天氣預報，因為看天氣預報又得打開網站、選擇地址，然后再自己慢慢從頁面分辨出自己想要的天氣信息，對于杰瑞這樣的“懶癌”患者來說這種情況是不會發生的。

所以杰瑞今天就要從技術上解決“查天氣麻煩”這個問題，怎么解決呢？沒錯！正如標題所述，杰瑞將使用爬蟲爬取杰瑞想要的天氣信息。

話不多說，上教程

代碼部分不是很復雜，所以杰瑞這篇文章里面就主講實現思路，各位同學跟上杰瑞的思路不要掉隊哦！

首先我們的打開一個天氣信息網站，然后進行一系列操作找到你所在地區的天氣信息，這個展示天氣信息的頁面就是咱們要爬取的頁面，上面有咱們需要的天氣信息。

怎么對這個頁面入手呢？我們先來分析一下，眾所周知，像這樣的頁面，我們選擇的地區不一樣，頁面顯示的數據就不一樣，但頁面的樣式是不會改變的，僅僅改變一些動態的數據而已，例如溫度、風力、日期等信息，這樣的頁面我們稱它為：“動態頁面”，注意哦，動態頁面并不是說這個頁面的動畫效果哦，而是頁面中顯示的數據會隨著時間或其他事件的變化而變化。

那我們如何把這個頁面中顯示的溫度、風力、日期等數據爬取下來呢？

事實上，當我們選擇地區讓頁面顯示出該地區的天氣信息時，就相當于瀏覽器和服務器發生了以下行為：

請求過程

實際上，這就是一個瀏覽器向服務器發起一個請求的過程。所以，如果我們能夠用python模擬這個請求過程，那么我們不就可以像瀏覽器那樣接收天氣服務器返回的天氣信息了嗎？

如果你這么想的話，那么恭喜你，思路完全正確！

向指定地址發起請求

我們可以使用python中的urllib庫urlopen方法，該方法可以打開一個url（你可以理解為被爬取網頁的網址），就像瀏覽器所做的那樣。

運行上面這幾行代碼然后把soup打印出來，我們可以看到這個網頁的標簽信息、JavaScript代碼以及我們想要的數據都顯示在控制臺窗口中。在這里杰瑞使用了BeautifulSoup庫用于解析html數據，具體用法各位同學可以查看相關文檔。

現在問題來了，我們如何從這么多的標簽中查找到我們需要的天氣數據呢？別急，我們先回到瀏覽器上，打開我們爬取的那個頁面然后按一下F12打開開發者模式，以谷歌瀏覽器為例，我們將看到以下界面。

我們打開Elements這個選項卡，在這里可以看到這個頁面的所有信息，包括標簽信息、JavaScript信息、天氣信息，其實Elements窗口中顯示的信息和我們在控制臺輸出的信息是一樣的，所以在Elements窗口中我們可以找到需要的天氣信息。

這里小編告訴大家一個小技巧，我們用鼠標指向某一行標簽時，該標簽所渲染的那些元素就會在頁面中“高亮”，可以借助這個特性快速找到我們要找的那行標簽。

如上圖，天氣信息就在類名為skyid的li標簽中，現在我們已經就確定了天氣信息所在的標簽，然后我們回到python編輯器中，我們使用BeautifulSoup中的find方法找到類名為skyid的li標簽入口。

然后我們將結果打印出來，可以看到下一下信息：

是不是有點似曾相識？沒錯，它就是我們在瀏覽器中看到的那組標簽：

那么接下來，各位同學應該知道怎么做了吧？find()方法我們可以這么理解，他可以返回頁面中指定類名、標簽中所標記的元素。所以我們可以像下面這樣找到所有我們需要的數據：

到這里，我們的教程就完成啦！接下來我們看一下效果。

效果展示

杰瑞爬取的是當天的天氣信息，如果有同學想獲取其他日期的數據也可參照上面的方法去獲取。

代碼運行效果

作者|編程高手杰瑞

各位同學都看到這里了，不如給杰瑞：

點贊、留言、關注

每天更新有趣實用的教程哦！

itle：Climate change now detectable from any single day of weather at global scale
標題：現在可以從全球范圍內任何一天的天氣中檢測到氣候變化
作者：Sebastian Sippel?1,2,3*, Nicolai Meinshausen 2, Erich M. Fischer1, Enik? Székelyg1, and Reto Knutti1
1 Institute for Atmospheric and Climate Science, ETH Zurich, Zurich, Switzerland.
2Seminar for Statistics, ETH Zurich, Zurich, Switzerland.
3Norwegian Institute of Bioeconomy Research, ?s, Norway.
4Swiss Data Science Center, ETH Zurich and EPFL, Lausanne, Switzerland.
E-mail: sebastian.sippel@env.ethz.ch[1]
雜志：Nature Climate Change, volume 10, pages35–41(2020)
DOI： https://doi.org/10.1038/s41558-019-0666-7[2]

原文摘要

長此以往，氣候科學家傳遞給公眾的都是“天氣不是氣候”的觀念，氣候變化也被框定為天氣分布的變化緩慢地出現于這數十年里主要的氣候變率中1-7。然而，現階段考慮全球性的天氣則是一個未知的領域。在這里我們基于全球觀測的單日溫度和水汽來檢測外部驅動氣候變化的“指紋”所得到的結論是：地球作為一個整體正在變暖。我們的檢測方法通過統計學習和氣候模型模擬來封裝每日溫度和濕度的空間模式與關鍵的氣候變化指標（例如，全球年平均溫度或地球的能量失衡之間）之間的關系。觀測數據投影到這種關系中來檢測氣候變化。根據一年的數據，從2012年初和1999年以來觀測到的全球記錄中的任何一天都可以檢測到氣候變化的“指紋”。即便是忽略長期全球變暖的趨勢，檢測的結果也是很穩健可靠的。這是對傳統氣候變化檢測的補充，但也為區域天氣事件的交流打開了更廣闊的視野，改變了氣候變化的敘述方式：盡管幾十年來局地的天氣變化正在出現，但現在就能即時檢測到全球氣候變化。

Abstract

For generations, climate scientists have educated the public that ‘weather is not climate’, and climate change has been framed as the change in the distribution of weather that slowly emerges from large variability over decades1-7. However, weather when considered globally is now in uncharted territory. Here we show that on the basis of a single day of globally observed temperature and moisture, we detect the fingerprint of externally driven climate change, and conclude that Earth as a whole is warming. Our detection approach invokes statistical learning and climate model simulations to encapsulate the relationship between spatial patterns of daily temperature and humidity, and key climate change metrics such as annual global mean temperature or Earth’s energy imbalance. Observations are projected onto this relationship to detect climate change. The fingerprint of climate change is detected from any single day in the observed global record since early 2012, and since 1999 on the basis of a year of data. Detection is robust even when ignoring the long-term global warming trend. This complements traditional climate change detection, but also opens broader perspectives for the communication of regional weather events, modifying the climate change narrative: while changes in weather locally are emerging over decades, global climate change is now detected instantaneously.

數據、代碼

數據[3]

All original CMIP5 data, reanalyses and observations used in this study are publicly available under the following URLs.

CMIP5 model data: https://esgf-node.llnl.gov/projects/cmip5/;

reanalysis:

ERA-Interim (https://www.ecmwf.int/en/forecasts/datasets/reanalysis-datasets/era-interim),

NCEP/NCAR Reanalysis 1 (https://www.esrl.noaa.gov/psd/data/gridded/data.ncep.reanalysis.html),

NCEP/NCAR Reanalysis 2 (https://www.esrl.noaa.gov/psd/data/gridded/data.ncep.reanalysis2.html),

Twentieth Century Reanalysis (https://www.esrl.noaa.gov/psd/data/20thC_Rean/);

observations (monthly): GISTEMP temperature dataset, version 3 (https://data.giss.nasa.gov/gistemp/),

Cowtan and Way (2014) temperature dataset, version 2 (https://www-users.york.ac.uk/~kdc3/papers/coverage2013/series.html),

Berkeley Earth Monthly Land+Ocean temperature dataset (http://berkeleyearth.org/data/), Met Office gridded land surface humidity dataset (HadISDH),

version 4.0.0.2017f (https://www.metoffice.gov.uk/hadobs/hadisdh/);

observations (daily): Berkeley Earth Daily Land temperature dataset (Experimental, http://berkeleyearth.org/data/),

NOAA Optimum Interpolation Sea Surface Temperature (OISST), AVHRR-Only (https://www.ncdc.noaa.gov/oisst).

All intermediate and derived data from these products (extracted CMIP5 fingerprints and daily/monthly time series of the test statistic (that is, obtained by projecting CMIP5 models, reanalyses and observations individually onto the fingerprints)) are available at https://data.iac.ethz.ch/Sippel_et_al_2019_DailyDetection/.

代碼[4]

All computer code to reproduce the main results and all figures and Extended Data figures is available at https://data.iac.ethz.ch/Sippel_et_al_2019_DailyDetection/

圖文

References

[1] sebastian.sippel@env.ethz.ch: mailto:sebastian.sippel@env.ethz.ch[2] https://doi.org/10.1038/s41558-019-0666-7: https://doi.org/10.1038/s41558-019-0666-7[3] 數據: https://www.nature.com/articles/s41558-019-0666-7#data-availability[4] 代碼: https://data.iac.ethz.ch/Sippel_et_al_2019_DailyDetection/

在線咨詢

上一篇：JavaScript 之定時事件
下一篇：如何用JavaScript創建彈出窗口

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS3動畫難嗎？從簡易的天氣動態圖標學習CSS3，

言

晴朗

下雨

天氣信息爬蟲

話不多說，上教程

效果展示

您的項目需求