整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS3動(dòng)畫難嗎?從簡(jiǎn)易的天氣動(dòng)態(tài)圖標(biāo)學(xué)習(xí)CSS3,

          CSS3動(dòng)畫難嗎?從簡(jiǎn)易的天氣動(dòng)態(tài)圖標(biāo)學(xué)習(xí)CSS3,簡(jiǎn)單易學(xué)很輕松

          通知!通知!,去我的首頁轉(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)。

          css3簡(jiǎn)易的天氣圖標(biāo)動(dòng)畫特效

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

          css3簡(jiǎn)易的天氣圖標(biāo)動(dòng)畫特效

          下雨

          <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簡(jiǎn)易的天氣圖標(biāo)動(dòng)畫特效

          這朵云是不是怪怪的,下邊應(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簡(jiǎn)易的天氣圖標(biāo)動(dòng)畫特效

          這里繪制云,和《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ì)得到不一樣的東西。

          css3簡(jiǎn)易的天氣圖標(biāo)動(dòng)畫特效

          如果你對(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ā)生了以下行為:

          請(qǐng)求過程

          實(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)簽。

          如上圖,天氣信息就在類名為skyidli標(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í)用的教程哦!


          itleClimate change now detectable from any single day of weather at global scale

          標(biāo)題現(xiàn)在可以從全球范圍內(nèi)任何一天的天氣中檢測(cè)到氣候變化

          作者: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]


          原文摘要

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

          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.

          數(shù)據(jù)、代碼

          數(shù)據(jù)[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] 數(shù)據(jù): https://www.nature.com/articles/s41558-019-0666-7#data-availability[4] 代碼: https://data.iac.ethz.ch/Sippel_et_al_2019_DailyDetection/


          主站蜘蛛池模板: 久久久无码一区二区三区| 麻豆视传媒一区二区三区| 无码AV一区二区三区无码 | 精品国产一区二区三区不卡 | 99无码人妻一区二区三区免费| 夜夜爽一区二区三区精品| 精品一区二区三区四区在线播放| 色狠狠色噜噜Av天堂一区| 精品国产一区二区麻豆| 亚洲AV无码一区二区三区网址| 精品无码日韩一区二区三区不卡 | 福利片福利一区二区三区| 日本精品无码一区二区三区久久久 | 亚洲一区二区三区国产精品无码| 国产免费一区二区三区不卡| 一区二区三区无码高清| 日韩一区二区精品观看| 日韩一区二区三区免费体验| 国内精自品线一区91| 国产精品无码一区二区三区毛片| 国模私拍福利一区二区| 精品欧洲AV无码一区二区男男 | 一本大道在线无码一区| 人妻av综合天堂一区| 国模一区二区三区| 亚洲第一区精品日韩在线播放| 在线精品日韩一区二区三区| 日本在线视频一区二区三区| 天天躁日日躁狠狠躁一区| 国产伦精品一区三区视频| 人妻无码一区二区视频| 岛国精品一区免费视频在线观看| 日本道免费精品一区二区| 熟女精品视频一区二区三区| 亚洲码一区二区三区| 日韩成人无码一区二区三区| 无码精品前田一区二区| 中文人妻av高清一区二区| 国产午夜精品片一区二区三区| 日本一区中文字幕日本一二三区视频| 色一乱一伦一区一直爽|