整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一、項目背景】
生活中經常會見到很多gif圖，那么gif圖到底是什么？GIF是一種位圖。簡單來說就是通過每一張張靜圖，通過控制它的關鍵幀，從而達到靜態圖動起來的效果。
這種GIF圖的效果，也可以用html+CSS3結合來做。
【二、項目目標】
完成GIF圖的制作。
【三、項目分析】
1、分析圖片。打開其中一張圖。
2、可以看到這張圖有45張不一樣動作的靜態圖合成。有點擊屬性。如圖所示：
看到這張照片是7020*156，一共有45幀。高度不變，寬度7020/45幀，就可以把每一幀的內容顯示出來。
【四、項目準備】
1、圖片：準備自己的喜歡的GIF靜態長圖，保存在文件夾。
2、軟件：Dreamweaver。
【五、項目實現】
1、創建div 存放圖片和文件，添加class屬性。
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>2、添加CSS樣式
1） 設置box的寬、高、位置、背景顏色。
.box{
width: 300px;
height: 300px;
background: #ccc;
position: absolute;
left: 0px;
top: 0;
}2）加載圖片，設置寬、高，-webkit-animation動畫效果。
.box2{
width: 156px;
height: 156px;
background: url("fox45.png");
-webkit-animation:aa 3s steps(45) infinite ;
}
@-webkit-keyframes aa{
100%{
background-position: -7020px 0;
}
}CSS3 animation屬性中的steps實現GIF動圖(逐幀動畫)
steps(45)表示讓整個動畫在45個關鍵幀之間切換。這個松鼠的圖片中
包含了45幀，所以這里設置了45。而且我們的動畫時長是3s，也就是說每一幀
停留1s，這就和普通的GIF動圖達到了一樣的效果。
【六、效果展示】
1、點擊F12運行到瀏覽器。
2、點擊圖片，效果如下。
【七、總結】
1、本項目，就gif圖遇到的一些難點進行了分析及提供解決方案。
2、html+css也可以做出網站頁面的效果，在上面顯示圖片標題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分。
3、按照操作步驟，自己嘗試去做。自己實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
4、需要本文源碼的小伙伴，后臺回復“GIF圖”四個字，即可獲取。
****看完本文有收獲？請轉發分享給更多的人****
IT共享之家
入群請在微信后臺回復【入群】
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/
常用的圖像格式—GIF，PNG，JPG
圖像標記<img />
HTML網頁中任何元素的實現都要依靠HTML標記，要想在網頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記以及和他相關的屬性。其基本語法格式如下：
<img src="圖像URL" />
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。
相對路徑
相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標圖像的位置。
例如：
<img src="img/logo.gif" alt="傳智播客-專業的java培訓,.net培訓,php培訓,網頁培訓,平面培訓,iOS培訓機構" />
相對路徑設置分為以下三種：
圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。
圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。
圖像文件位于html文件的上一級文件夾：在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="../logo.gif" />。
絕對路徑
絕對路徑一般是指帶有盤符的路徑。
例如：
“D:\HTML+CSS網頁制作\chapter02\img\logo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/logo.gif”。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345
了參加最近的StackExchange的“time”主題比賽,我制作了一個Gif來展示StackOverflow網站從2008年 到今天的發展歷程:
這里是一張GIF圖片，可以點擊閱讀原文查看。圖片太大，無法插入公眾號文章。
第一步是為Internet Archive找到一個合適的API。它支持Memento，這是2013年RFC 7089中定義的基于http的協議。使用memento_client包裝器，我們可以使用以下Python代碼得到網站最接近給定日期的快照:
不要忘記安裝memento_client庫哦:
pip install memento_client
請注意，此代碼會給我們一個最接近的快照，所以不可能確切地是兩周以前的。
通過使用一個持續增加的時間增量，我們可以循環此段代碼來獲取不同 時間的快照。但我們不只是想獲取URL。我們還想對每一個網頁都做一個截圖。
以編程方式獲取網頁截圖的最簡單方法可能是使用Selenium。我用Chrome作為驅動程序;你可以從ChromeDriver網站下載，也可以在使用Homebrew包管理器的Mac電腦上運行以下命令:
brew install bfontaine /utils/ chromedriver
我們還需要為Python安裝Selenium:
pip install selenium
代碼很短:
如果你運行上面的代碼，你會看到一個Chrome窗口自動打開，并自動去訪問URL，當頁面全部加載后自動關閉。然后你就獲得了一個該頁面的截圖，文件名是 stackoverflow_20181119211854.png!然而，很快你就會注意到這個截圖中網站的最上面有Wayback Machine（一款網頁備份工具）的頁眉。
這在手動瀏覽快照時非常方便，但在從Python訪問快照時就不那么方便了。
幸運的是，我們可以通過稍微修改URL來獲得一個無頁眉的URL:我們可以將 id _ 添加到日期的末尾，以便獲得與機器爬取時完全相同的頁面。當然，這意味著它會鏈接到可能不再存在的CSS和JS文件。通過用im_替代id_,我們也可以得到一個鏈接到經過稍微修改的存檔頁面的URL，用它來替換原始的存檔頁面。
帶有頁眉和重寫鏈接的頁面:
https://web.archive.org/web/20181119211854/...
原始頁面，跟爬取的頁面一樣:
https://web.archive.org/web/20181119211854id_/...
重寫鏈接后的原始頁面:
https://web.archive.org/web/20181119211854im_/...
使用修改后的URL重新運行代碼會得到正確的截圖:
將這兩段代碼組合起來，我們可以在不同的時間間隔對URL進行截圖。你可能想在截圖完成時檢查圖片，并刪除不一致的圖片。例如，谷歌主頁的存檔快照并不是一直都是同一種語言。
一旦得到了所有的圖片，我們就可以使用Imagemagick生成一個gif:
convert –delay 50 –loop 1 *.jpg stackoverflow.gif
我使用了以下參數:
–delay 50:每0.5s改變畫面。數字代表每1/100秒。
–loop 1：對所有畫面只循環一次。默認情況下是進行無限循環，但在這里沒有意義。
你可能想要使用-delay參數進行播放，這取決于你有多少圖片以及網站改變的頻率。
我也做了一個谷歌版本(約10MB)的gif，每秒5幀,并使用了 –delay 20參數。我使用了與StackOverflow gif相同的延遲時間：:每個截圖之間至少間隔5周。通過查看每張圖片的底部，你可以看到每個截圖來自哪一年。
2018年 12月3日-#experiments,#imagemagick,#python,#selenium
——Baptiste Fontaine"s Blog
英文原文：https://qiniumedia.freelycode.com/vcdn/1/%E4%BC%98%E8%B4%A8%E6%96%87%E7%AB%A0%E9%95%BF%E5%9B%BE2/record-website-change-gif.pdf
譯者：浣熊君( ????? )
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
