html5教程：8个炫酷CSS动画及源码分享

10款让人惊叹的html5动画效果这里介绍10款让人叹为观止的html5动画效果1、15种html5+css3图片堆叠图片展示特效这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。

2、html5 svg+css3制作图片边框运动动画效果一款使用html5 svg技术制作的图片边框运动动画效果，鼠标移动到图片上时，便会有几条线绕着边框运动，共有4种不同的效果。

建议使用Firefox或Chrome浏览器观看。

3、21种html5+css3鼠标悬停hover超链接导航条动画效果利用css3 transition属性制作的21种不同的鼠标悬停效果。

当鼠标hover或悬停在超链接上时，会触发各种动画效果。

每种动画效果都十分独特，可用于网站导航。

4、18种基于html5 svg和css3的神奇超链接动画效果普通的超链接效果是鼠标放上去出现一条下划线，本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。

每种超链接动画效果都有它的独到之处。

5、html5+css3网格图片3d翻转Loading页面切换效果这是一个图片html5和css3制作的3d翻转Loading页面切换效果。

在页面上以网格的形式展示所有的页面缩略图，当点击了缩略图片后，图片进行3d翻转，然后加载相应的页面内容。

6、12种利用html5+css3打造的消息提示框效果这是12种风格各异的弹出消息提示框效果，使用html5和css3 animation属性制作，有各种旋转、翻转、伸展特效。

效果非常华丽。

7、15种html5 svg+css3制作的超酷响应式tab选项卡效果这是15种效果非常酷的tab选项卡效果，使用的技术分别是html5 svg，css 伪元素，css transitions，每种效果都带有过渡动画，并且是响应式的。

HTML5制作3D爱⼼动画教程献给⼥友浪漫的礼物 谁说程序员不懂得浪漫，看看程序员是怎么浪漫的，今天⼩编在国外的⽹站上看到⼀个利⽤HTML5和CSS3制作的3D爱⼼动画，在情⼈节时送给⼼爱的⼈，还是⾮常不错的。

当然了。

背景我们可以⽤⼀些浪漫元素。

如加上⼥朋友漂亮的照⽚。

这样可以制作⼀个廉价⼜很有意义的情⼈节礼物。

⼤家可以点解DEMO来看看。

先上效果图： 实现代码如下： html代码：XML/HTML Code复制内容到剪贴板1. <div class=’heart3d’>2. <div class=’rib1′></div>3. <div class=’rib2′></div>4. <div class=’rib3′></div>5. <div class=’rib4′></div>6. <div class=’rib5′></div>7. <div class=’rib6′></div>8. <div class=’rib7′></div>9. <div class=’rib8′></div>10. <div class=’rib9′></div>11. <div class=’rib10′></div>12. <div class=’rib11′></div>13. <div class=’rib12′></div>14. <div class=’rib13′></div>15. <div class=’rib14′></div>16. <div class=’rib15′></div>17. <div class=’rib16′></div>18. <div class=’rib17′></div>19. <div class=’rib18′></div>20. <div class=’rib19′></div>21. <div class=’rib20′></div>22. <div class=’rib21′></div>23. <div class=’rib22′></div>24. <div class=’rib23′></div>25. <div class=’rib24′></div>26. <div class=’rib25′></div>27. <div class=’rib26′></div>28. <div class=’rib27′></div>29. <div class=’rib28′></div>30. <div class=’rib29′></div>31. <div class=’rib30′></div>32. <div class=’rib31′></div>33. <div class=’rib32′></div>34. <div class=’rib33′></div>35. <div class=’rib34′></div>36. <div class=’rib35′></div>37. <div class=’rib36′></div>38. </div> 这么多div，主要是构造爱⼼的线条区域。

精选19款华丽的HTML5动画和实⽤案例下⾯是本⼈收集的19款超酷HTML5动画和实⽤案例，觉得不错，分享给⼤家。

1、HTML5 Canvas⽕焰喷射动画效果还记得以前分享过的⼀款HTML5烟花动画，今天我们要来分享⼀款类似的效果，⼀款基于HTML5 Canvas⽕焰喷射动画。

⽤⿏标拖动⼀条直线，直线长度表⽰⽕焰喷射的⼒度，另外，⽕焰在运动中还可以反射效果哦。

2、⽴⽅体旋转动画之前我们已经分享⼀款，可以切换⾄正⽅体的任意⼀⾯。

今天我们再来分享⼀款绚丽的HTML5 3D⽴⽅体旋转动画，这款⽴⽅体的⾊彩看上去⾮常艳丽，旋转起来的动画效果也⼗分流畅。

是⼀款很不错的HTML5 3D动画效果。

3、HTML5/CSS3实现⼤风车旋转动画这次我们要来分享⼀款很酷的HTML5动画，是⼀个可以旋转的⼤风车动画效果，回顾⼀下利⽤HTML5实现的旋转动画，我们可以看，它们的实现都是利⽤CSS3的transform:rotate属性，这款⼤风车动画的确⽐较厉害的。

4、HTML5⼩车动画很酷的HTML5吉普车有⼏天没有分享HTML5动画了，之前很多HTML5动画都是利⽤CSS3的⼀些特性和Canvas特性来完成，⽐如这个就利⽤CSS3的动画特性，就利⽤了HTML5 Canvas特性。

今天我们要分享⼀款利⽤HTML5/CSS3实现的吉普车动画，⼩车可以⽔平滚动，⾮常逼真。

5、纯CSS3 3D图⽚翻转展⽰图⽚3D阴影效果之前我们分享过⼀些HTML5图⽚3D效果，这篇⽂章中我们可以看到很多3D的图⽚特效。

今天我们再来分享⼀款利⽤纯CSS3实现的3D图⽚翻转展⽰特效，点击图⽚或者下⽅的翻页按钮即可选中相应的图⽚，并实现翻转展⽰效果。

6、HTML5摆动的⽂字特效类似柳枝摆动之前我们在上分享过⼀些HTML5⽂字特效，像这款，像这款都⾮常有特⾊。

今天我们来分享⼀款可以摆动的HTML5⽂字特效，⽂字垂直下垂，并可以在微风中微微摆动，就像春风中的柳枝⼀样。

html5学习视频下载链接分享Html5开发工程师相对于其他的IT技术来讲，只能算半个程序员，因为入门的门槛低，所以学习HTML5的人员多半是零基础，而且还有很多是非计算机专业出身的。

没有基础可以学html5吗？答案当然是肯定的，但想要学好这门技术，好的学习资料必不可少，html5学习视频下载链接分享给大家。

千锋html5教程第1部分：课程体系解读/s/1o7B9OYA千锋html5教程第2部分：微案例讲解https:///s/1nwyNFg1 千锋H5视频教程第3部分：知识点讲解/s/1jICHs9o 千锋Vue组件之手机通讯录实战课程/s/1c1FrXLY 千锋微信小程序基础与实战https:///s/1xE35SQcvW0sCF2NoR_ONiwHtml5相对于IT技术类其他岗位而言，绝对算是门槛低的。

当然了，起点也低。

如果是零基础的同学入行，或者是转行到IT技术，完全可以选择HTML5前端开发。

其次，HTML5前端开发入门门槛低，其实是有原因的：原因一是HTML5前端开发门槛主要是体现在css和html上，CSS是样式配置，HTML是标签，在学习时很好入手，大家在前期学习时可以找些相关视频来看，这些视频都是比较基础的，零基础的人员也可以看懂，这样在后期的学习中，也就更容易掌握。

原因二是符合82定律，也就是20%的东西，使用率占到80%.因此非常适合囫囵吞枣，因此我们的重点就是把这20%学起来，而我们首先要做的就是把这20%的东西找出来。

前端这20%的东西，大概就是常用的html标签，css 的盒子模型，基本的原生js，以及熟练使用jquery，ajax，常见浏览器的兼容。

还有就是如何入门HTML5前端开发?学习HTML5就像是搭建房子，HTML充当了房子的基础部分，CSS就好比房子的装修，房子需要修成什么样式，墙面什么颜色?这些给房子改变了风格，就是一个房子的功能，房子需要制冷吧？需要暖气吧？这些功能就相当于JS的例子，可能不是很恰当，只是帮助大家有个初步的了解。

6个超炫酷的HTML5电⼦书翻页动画相信⼤家⼀定遇到过⼀些电⼦书⽹站，我们可以通过像看书⼀样翻页来浏览电⼦书的内容。

今天我们要分享的HTML5应⽤跟电⼦书翻页有关，我们精选出来的6个电⼦书翻页动画都⾮常炫酷，⽽且都提供源码下载，有需要的朋友可以下载使⽤。

1、jQuery书本翻页3D动画特效今天要分享的这款jQuery书本翻页3D动画功能更加强⼤，可以⽀持任意数量页的翻阅，并且也有⾮常美观的视觉效果。

书本的内容⽀持任意HTML元素，相当灵活。

2、CSS3书本翻页动画书本翻页效果逼真今天我们要分享⼀款炫酷⽽且实⽤的CSS3动画效果，它是模拟书本翻页的动画特效。

当⿏标滑过书本右上⾓时，书本即可向前翻⼀页，⽽且翻页动画⾮常逼真。

由于CSS3的运⽤，我们并不需要使⽤复杂的图⽚来制造逼真的书本效果，书本翻页可以很简单地完成。

3、HTML5电⼦书翻页动画特效今天我们要来分享⼀款很酷的HTML5电⼦书翻页动画特效，这款HTML5翻页动画可以⽤⿏标拖动页⾯来模拟⼿动翻页的效果，也可以点击书页的边框来快速翻页。

4、HTML5 3D书本翻页特效 3D效果⽐较漂亮利⽤HTML5和CSS3实现3D效果真的⾮常⽅便，下⾯这款书本翻页特效就很好地利⽤了HTML5的3D特性。

⿏标拖拽书本页⾯即可翻动页⾯，在翻页的过程中整本书还呈现出3D⽴体的效果，包括书本中的图⽚也⼗分⽴体。

5、HTML5/CSS3书本翻页3D动画前段时间我们分享过很多⽜叉的HTML5动画，如果你对HTML5感兴趣，可以移步⾄HTML5动画欣赏学习。

今天我们要分享⼀款基于HTML5和CSS3的书本翻页3D动画，当我们将⿏标滑过书本时，书本就会⾃动⼀页页翻过去，书本的3D效果⾮常不错。

6、jQuery/CSS3书本翻页动画特效这是⼀款基于jQuery和CSS3的书本翻页动画特效，该书本翻页插件的外观⾮常华丽喜庆，⾮常适合产品活动或者育⼉⽹站使⽤。

我们可以点击左右翻页按钮进⾏翻页，也可以使⽤⿏标拖拽页脚来实现翻页动画。

惊艳的HTML5动画特效及源码今天我们要来分享⼀些很酷的HTML5动画演⽰，HTML5的强⼤之处在于它可以利⽤canvas的特性来绘制很多普通⽹页⽆法完成的图形和动画，canvas就像⼀块超级画板，在上⾯不仅可以实现平⾯图形，⽽且⼀些3D动画也⾮常简单。

很多HTML5动画也都基于canvas，⼀起来看看吧。

HTML5/CSS3实现⼤风车旋转动画作为今天⾸款HTML5动画，这款⼤风车旋转效果的确⾮常棒，它是⽤纯CSS3实现。

核⼼CSS代码：.wmd1{-webkit-transform: scale(.6);position:absolute;top:180px;left:200px;perspective: 1000px;}.base{ }.blades{width: 350px;height: 350px;left: 10%;top: 10%;z-index:2;border-radius: 50%;position: absolute;margin-top: -30px;margin-left: 50px;animation: spin 6s linear infinite;}.blade1 {background: white;position:absolute;width:41px;height:139px;top:-10px;left:150.5px;transform:rotate(0deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left;background-size: 50% 50%;background-repeat: no-repeat;}.blade2 {background:white;position:absolute;width:41px;height:139px;top:105.5px;left:41px;transform:rotate(-90deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left;background-size: 50% 50%;background-repeat: no-repeat;}.blade3 {background:white;position:absolute;width:41px;height:139px;top:105.5px;right:41px;transform:rotate(-270deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%;background-repeat: no-repeat;}.blade4 {background:white;position:absolute;width:41px;height:139px;bottom:-10px;left:150.5px;transform:rotate(180deg);display:inline-block;background:linear-gradient(135deg, transparent 20px, white 0),linear-gradient(225deg, transparent 20px, white 0),linear-gradient(315deg, transparent 20px, white 0),linear-gradient(45deg, transparent 20px, white 0);background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%;background-repeat: no-repeat;}.vane1{width:1px;height:350px;left:175px;background:white;position:absolute;transform:rotate(90deg);}.vane2{width:1px;height:350px;left:171.5px;background:white;position:absolute;transform:rotate(180deg);}.base .bottom_base{position:absolute;width:90px;height:100px;left:162px;border-right: 16px solid transparent;border-left: 16px solid transparent;border-bottom: 380px solid white;opacity:.8;z-index:-1;top:42.5px;}ul{position:absolute;top:180px;left:-30px;}li{width:10px;height:10px;background:white;padding:2px;display:block;margin: 30px;box-shadow: inset 0px -2px 0px lightgray;}li:nth-child(2){position:absolute;top:-45px;left:20px;}li:nth-child(1){position:absolute;top:35px;left:50px;}li:nth-child(3){position:absolute;top:75px;left:50px;}@keyframes spin {0% {transform:rotate(0deg);}100% {transform:rotate(-360deg);}}View Code纯CSS3 3D图⽚翻转展⽰这是⼀款基于CSS3的3D图⽚展⽰，在图⽚切换时将会有翻转的动画效果。

Html基本的动画效果（平移，旋转）在HTML中我们可以⾃⼰制作⼀些有趣的动态动画放⼊页⾯，也可以给⽤户体验增加⼀点趣味，所以合理的利⽤css动画效果。

动画 1.位置：位移 translate（x，y）；2.⼤⼩：缩放 scale（xx px）；1、转化：改变元素的 3.状态：旋转 rotate（xx deg）；4.形态：skew（xx deg）；2、转化属性：css转化属性 transform : none 不转换/ transform-function;转化函数如 transform:translate位移(170px);3、转换原点： transform-origin:如 transform-origin: 50% 50%；取值：数值：以元素左上⽅的点为(0,0)，再去计算其他点百分⽐:0% , 0% : 左上⽅的点50% ， 50% ：元素的中⼼点关键字:leftrighttopbottomcenterleft top : 表⽰左上⽅transform-origin赋值：⼀个值：x轴的移动两个值：x轴和y轴三个值：x轴，y轴，z轴1. 过度2. 动画3. css样式2、2D转换 -位移translate位移：位置移动从当前元素的位置处，移动到指定坐标轴位置处函数：translate(x,y)translate(value);去负值x ：正向右移动负向左移动y : 正向下移动负向上移动单⽅向位移：translateX(x)translateY(y)如：匀速360logo的平移样式与各种速度样式的对⽐图ease:默认模式“慢快慢”；linear：匀速ease-in：由慢到快“加速”ease-out：由快到慢“减速”ease-in-out：（开始）很慢-快-变慢-很慢（结束）background-position 属性能够定位到你需要的图标 x横轴正数向左边负数向右； y轴正数为下负数为上px为单位animation ：定义的动画名持续时间运动⽅式延迟时间次数；3、2D转换 - 缩放缩放：改变元素⼤⼩函数：scale(value)scale(x,y)取值：默认值 1缩⼩：0 - 1 之间的⼩数放⼤：⼤于1scaleX(x) : 横向缩放scaleY(y) : 纵向缩放下图为⾳乐播放的正在播放图标⼀个（注意后⾯的延迟⽐前⾯的时间长，前⾯的时间播放长但是延时短）4、2D转换 - 旋转围绕着指定点，按照指定的⾓度发⽣的旋转函数：rotate(deg)取值：deg 为⾓度 0-360默认为顺时针旋转deg取值为负的话，则将逆时针旋转5、2D转换 - 倾斜函数：skew()取值：为⾓度skewX(x)skewY(y)下图是⼀个加载图标：6、3D转换属性:perspective : 设置假定⼈眼到投影平⾯的距离只影响3D元素，不影响2D元素设置位置：加在⽗元素上，设置好后，其⼦元素就可以完成3D的转换。

25款不得不说的html5+css3动画效果这25款动画效果分别使⽤了html5 svg、css3 transform、css3 transition、css3 animation等制作⽽成。

1、9种梦幻般的html5+css3 tooltip⿏标提⽰插件效果这个tooltip⿏标提⽰插件将带您离开黄底⿊字的html tooltip原始时代。

该插件共9种效果，使⽤html5 svg和css3 transform属性完成。

该tooltip带图⽚带动画，效果⼀流。

>>2、19种基于css3的超华丽模态窗⼝效果这是⼀款集19种模态窗⼝效果于⼀体的css3插件。

使⽤了css3 transition 和css3 animation属性。

某些模态窗⼝中还加⼊了3d透视效果。

>>3、在桌⾯和移动设备上展⽰响应式设计这个响应式设计展⽰了在不同设备的显⽰屏上⽹页的显⽰效果，这种响应式设计保证了在所有显⽰屏上获得最佳显⽰效果。

>>4、 html5 svg打开圣诞礼盒和下雪动画效果⼀款很炫的html5 svg打开圣诞礼盒和下雪动画效果。

点击礼盒后会飞出许多icon礼物，之后会有雪花从屏幕上⽅飘落。

>>5、html5 css3为移动设备设计的可⾃由伸缩的搜索框代码这是⼀个为移动设备设计的可⾃由伸缩的html5搜索框代码，使⽤css3 transition属性和少量的javascript完成。

>>6、 css3 transitions和伪元素制作4种超酷⿏标经过hover动画效果⼀款使⽤css3 transitions和伪元素制作的4种⿏标经过hover动画效果，4种⿏标经过hover动画效果分别是：滴⽔效果，圆⼼放⼤，旋转放⼤和飞翔的独眼怪。

>>7、13款html5 svg页⾯loading加载动画效果13款使⽤html5 svg技术打造的页⾯loading加载动画效果。

纯HTML5+CSS3制作⽣⽇蛋糕代码以⼀个前端开发的⾝份绘制⼀个简单的蛋糕庆祝⼀下今天这个好⽇⼦吧，程序员庆⽣的乐趣与哀愁啊。

写的⽐较简陋，感兴趣的看⼀下吧。

先发个效果图吧蛋糕分为三个部分，底部蛋糕，顶层蛋糕和蜡烛部分。

HTML的布局结构也是按照这三部分布局的。

另外就是使⽤CSS定位和CSS3的rotate，内外阴影等效果调整部分DOM元素样式。

⽐较简单，相信码农都懂的。

不赘述其它有的没的了。

下⾯给出完整的的HTML代码和CSS代码<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.birthday .container{width:600px;height:600px;margin:0px auto;background: #fafafa;border-radius:5px;position: relative;}/**** 顶层的**/.birthday .top-one{position: absolute;width:280px;height: 280px;bottom: 200px;left:160px;}.birthday .top-one .bottom{position: absolute;width:280px;height: 280px;bottom:-30px;border:1px solid #3e2001;border-radius: 140px;transform: rotateX(60deg);z-index: 4;background: #3e2001;box-shadow: 0px 0px 20px #3e2001;}.birthday .top-one .top{position: absolute;width:280px;height: 280px;top:-50px;border-radius: 140px;background: #FFFFFF;transform: rotateX(60deg);box-shadow: 2px 2px 20px #b7b7b7;z-index: 6;background: -webkit-repeating-radial-gradient(circle, #783d01, #3e2001 10px, #914909 10px,white 20px);background: -moz-repeating-radial-gradient(circle, #783d01, #3e2001 10px,#914909 10px,white 20px);}.birthday .top-one .side{position: absolute;top:95px;width:280px;height: 70px;border:1px solid #3e2001;border-top-width: 0px;border-bottom-width: 0px;background: #FFFFFF;z-index: 5;background: #3e2001;}/**** 底层的**/.birthday .bottom-one{position: absolute;width:400px;height: 400px;bottom: 0px;left:100px;}.birthday .bottom-one .bottom{position: absolute;width:400px;height: 400px;bottom:-30px;border:1px solid #914909;border-radius: 200px;transform: rotateX(60deg);box-shadow: 2px 2px 20px #914909;z-index: 1;background: #3e2001;overflow: hidden;}.birthday .bottom-one .line{position: absolute;width:400px;height: 400px;border-radius: 200px;z-index: 1;}.birthday .bottom-one .line1{bottom: 30px;border:5px solid #783d01;left:-5px;z-index: 1;}.birthday .bottom-one .top{position: absolute;width:400px;height: 400px;top:-100px;border:1px solid #3e2001;border-radius: 200px;background: #FFFFFF;transform: rotateX(60deg);z-index: 3;background: #783d01;box-shadow: inset 0px 0px 20px #3e2001; }.birthday .bottom-one .side{position: absolute;top:100px;width:400px;height: 130px;border:1px solid #3e2001;border-top-width: 0px;border-bottom-width: 0px;background: #3e2001;z-index: 2;}/**** 底层的⽂字**/.birthday .flower{position: relative;text-align: justify;z-index: 9;top:200px;font-size: 32px;font-family: "Helvetica Neue", "Noto Sans CJK SC", "Source Han Sans CN"; color:#FFFFFF;font-weight: bold;}.birthday .flower:after{content:"";display:inline-block;position: relative;width:100%;}.birthday .flower i{position: relative;width:80px;line-height: 80px;display: inline-block;border-radius: 50%;border:2px solid #783d01;text-align: center;}/**** 顶层的⽂字**/.birthday .top-one .text{width:100%;text-align: center;position: absolute;top:165px;z-index: 9;margin:0px auto;font-size: 30px;color:#FFFFFF;transform: rotateX(60deg) skew(10deg,20deg);}/**** 蜡烛**/.birthday .candle{width:10px;height:80px;margin:0px auto;position: absolute;left:295px;top:130px;z-index: 9;}.birthday .candle .body{width:10px;height:70px;margin:0px auto;background: red;border-bottom-width: 0px;}.birthday .candle .top{width:10px;height: 10px;border-radius: 5px;transform: rotateX(60deg);position: relative;top:5px;background: red;}.birthday .candle .bottom{width:10px;height: 10px;border-radius: 5px;transform: rotateX(60deg);position: relative;bottom:5px;background: red;box-shadow: 1px 1px 10px red;}.birthday .candle .fire{position: absolute;width:6px;height: 6px;left:2px;transform: rotate(45deg);background: #ffd507;box-shadow: 0px 0px 20px #ffff00, 2px 2px 10px red;}</style></head><body><div class="birthday"><div class="container"><div class="candle"><div class="fire"></div><div class="top"></div><div class="body"></div><div class="bottom"></div></div><div class="top-one"><div class="top"></div><div class="side"></div><div class="bottom"></div><div class="text">Happy Birthday</div></div><div class="bottom-one"><div class="top"></div><div class="side"></div><div class="bottom"><div class="line line1"></div></div><div class="flower"><i style="top:-20px;transform: rotateY(50deg)">⽣</i><i style="top:15px;transform: rotateY(30deg)">⽇</i><i style="top:15px;transform: rotateY(30deg)">快</i><i style="top:-20px;transform: rotateY(50deg)">乐</i></div></div></div></div></body></html>okay，庆⽣开发的⼩Demo，以后可以尝试⽤Canvas画布或SVG试着在做⼀下，感谢阅读。