言

通知！通知！，去我的首頁轉(zhuǎn)發(fā)“抽獎(jiǎng)活動(dòng)” 可以參與抽獎(jiǎng)（一塊抖音網(wǎng)紅手表）哦。

前面文章《CSS3線性漸變、陰影、縮放實(shí)現(xiàn)動(dòng)畫下雨效果》實(shí)現(xiàn)了下雨的動(dòng)畫效果，現(xiàn)在我們來繪制更多天氣相關(guān)的動(dòng)態(tài)圖標(biāo)。

上圖6種天氣，我們就分開一一展示給小伙伴們，希望能給大家?guī)韼椭?/p>

晴朗

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

sun標(biāo)簽繪制圓環(huán)，rays及其偽類繪制射線，然后添加動(dòng)畫，其實(shí)旋轉(zhuǎn)。

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); 
 } 
}

下雨

<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; 
}

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

.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線性漸變、陰影、縮放實(shí)現(xiàn)動(dòng)畫下雨效果》一樣的，都是用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繪制一個(gè)小雨滴，見證它的成長(zhǎng)之路》，其實(shí)很多東西都是一點(diǎn)點(diǎn)積累的過程，慢慢的拼湊，會(huì)得到不一樣的東西。

如果你對(duì)box-shadow動(dòng)畫還不是很熟悉的，可以看這里《CSS3 box-shadow實(shí)現(xiàn)背景動(dòng)畫》

家好，我是杰瑞，經(jīng)常更新一些有趣實(shí)用的教程，喜歡的就請(qǐng)關(guān)注我吧！

天氣信息爬蟲

海南的天氣實(shí)在是熱得慌，杰瑞被外面燥熱的空氣“困”在了家里面，也不知道什么時(shí)候能下雨天氣涼爽一點(diǎn)，好讓我出去打打籃球跑跑步啥的，杰瑞也懶得去看天氣預(yù)報(bào)，因?yàn)榭刺鞖忸A(yù)報(bào)又得打開網(wǎng)站、選擇地址，然后再自己慢慢從頁面分辨出自己想要的天氣信息，對(duì)于杰瑞這樣的“懶癌”患者來說這種情況是不會(huì)發(fā)生的。

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

話不多說，上教程

代碼部分不是很復(fù)雜，所以杰瑞這篇文章里面就主講實(shí)現(xiàn)思路，各位同學(xué)跟上杰瑞的思路不要掉隊(duì)哦！

首先我們的打開一個(gè)天氣信息網(wǎng)站，然后進(jìn)行一系列操作找到你所在地區(qū)的天氣信息，這個(gè)展示天氣信息的頁面就是咱們要爬取的頁面，上面有咱們需要的天氣信息。

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

那我們?nèi)绾伟堰@個(gè)頁面中顯示的溫度、風(fēng)力、日期等數(shù)據(jù)爬取下來呢？

事實(shí)上，當(dāng)我們選擇地區(qū)讓頁面顯示出該地區(qū)的天氣信息時(shí)，就相當(dāng)于瀏覽器和服務(wù)器發(fā)生了以下行為：

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

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

向指定地址發(fā)起請(qǐng)求

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

運(yùn)行上面這幾行代碼然后把soup打印出來，我們可以看到這個(gè)網(wǎng)頁的標(biāo)簽信息、JavaScript代碼以及我們想要的數(shù)據(jù)都顯示在控制臺(tái)窗口中。在這里杰瑞使用了BeautifulSoup庫用于解析html數(shù)據(jù)，具體用法各位同學(xué)可以查看相關(guān)文檔。

現(xiàn)在問題來了，我們?nèi)绾螐倪@么多的標(biāo)簽中查找到我們需要的天氣數(shù)據(jù)呢？別急，我們先回到瀏覽器上，打開我們爬取的那個(gè)頁面然后按一下F12打開開發(fā)者模式，以谷歌瀏覽器為例，我們將看到以下界面。

我們打開Elements這個(gè)選項(xiàng)卡，在這里可以看到這個(gè)頁面的所有信息，包括標(biāo)簽信息、JavaScript信息、天氣信息，其實(shí)Elements窗口中顯示的信息和我們?cè)诳刂婆_(tái)輸出的信息是一樣的，所以在Elements窗口中我們可以找到需要的天氣信息。

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

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

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

是不是有點(diǎn)似曾相識(shí)？沒錯(cuò)，它就是我們?cè)跒g覽器中看到的那組標(biāo)簽：

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

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

效果展示

杰瑞爬取的是當(dāng)天的天氣信息，如果有同學(xué)想獲取其他日期的數(shù)據(jù)也可參照上面的方法去獲取。

代碼運(yùn)行效果

作者|編程高手杰瑞

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

點(diǎn)贊、留言、關(guān)注

每天更新有趣實(shí)用的教程哦！