整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一、项目背景】
生活中经常会见到很多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小时内与您取得联系。
