如何用HTML5实现图片转圈的动画效果
10款让人惊叹的html5动画效果
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，每种效果都带有过渡动画，并且是响应式的。
详解通过HTML5Canvas实现图片的平移及旋转变化的方法
详解通过HTML5Canvas实现图⽚的平移及旋转变化的⽅法平移变换translate()平移变换，故名思议，就是⼀般的图形位移。
⽐如这⾥我想将位于（100，100）的矩形平移⾄（200，200）点。
那么我只要在绘制矩形之前加上context.translate(100,100)即可。
这⾥的translate()只传⼊两个参数，其实就是新画布坐标系原点的坐标。
下⾯结合代码来看看效果。
XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html lang="zh">3. <head>4. <meta charset="UTF-8">5. <title>平移变换</title>6. <style>7. body { background: url("./images/bg3.jpg") repeat; }8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }9. </style>10. </head>11. <body>12. <div id="canvas-warp">13. <canvas id="canvas">14. 你的浏览器居然不⽀持Canvas？！赶快换⼀个吧！！15. </canvas>16. </div>17.18. <script>19. window.onload = function(){20. var canvas = document.getElementById("canvas");21. canvas.width = 800;22. canvas.height = 600;23. var context = canvas.getContext("2d");24. context.fillStyle = "#FFF";25. context.fillRect(0,0,800,600);26.27. context.fillStyle = "#00AAAA";28. context.fillRect(100,100,200,100);29.30. context.fillStyle = "red";31. context.translate(100,100);32. context.fillRect(100,100,200,100);33.34. };35. </script>36. </body>37. </html>运⾏结果：这⾥的蓝⾊矩形，是矩形原来的位置，然后调⽤translate()⽅法，将矩形位移⾄（200，200），即红⾊矩形的位置。
《实验5 HTML5动画制作-拖动动画+滤镜动画+关联动画》
实验五拖动动画、滤镜动画、关联动画一、拖动动画1．在舞台中添加3张图片，并将它们上下相接2．同时选中所有图片，点击鼠标右键，弹出菜单中选择“组”-“组合”，此时3张图片已经变成了一组图片。
观察属性面板的第一行，已经显示为“组”。
3．将属性面板的“拖动/旋转”按钮设置为“垂直拖动”，如下图，4．预览动画，此时可以在整个屏幕区用手指上下拖动图片。
5．如果欲将图片控制在某个特定区域内显示，而不是满屏显示，可以做如下修改：(1)将上述步骤3还原回原来的设置，即将“拖动/旋转”按钮设置为“不允许”；(2)将属性面板的“组类型”设置为“裁剪内容”，此时组类型的下方会出现“允许滚动”的选项，将其设置为“垂直滚动”，如下图：(3)点击工具栏的“变形”工具，回到舞台中，将组合后的图片变形缩小到合适的尺寸（通常比舞台尺寸小），并拖放到目标位置，例如下图中的红框区域：(4)预览动画，此时只能在目标区域（红框）内才可以上下拖动图片，区域外不可拖动。
(5)如果将“垂直滚动”更改为“自由滚动”，则在上下和左右两个方向均可以实现拖动。
(6)注：在电脑上预览时，目标区域中会出现上下或左右滚动条。
而通过二维码共享在手机端浏览时，不会出现滚动条，只能通过手指来拖动图片。
二、滤镜动画1．制作动画（关键帧动画、变形动画等）2．在时间线上选中某一个关键帧，在属性面板中对“滤镜”按钮进行设置，如下图，例如选择“模糊”滤镜。
然后点击后面的加号“+”，在弹出的滚动条上设置具体的“模糊”数值。
3．回到时间线上，选中同一图层的另一个关键帧，对该关键帧设置和步骤2一样的滤镜选项（本例中再次选择“模糊”滤镜，并设置一个和步骤2不同的“模糊”数值）。
4．如果需要添加多个滤镜，则重复上述步骤2和3，可以继续添加其他滤镜效果。
三、动画的关联关联动画，是将动画与某个对象绑定。
动画的播放与停止，受该对象的控制。
1．舞台动画的关联(1)将第一个图层重新命名为“风景”，在第1帧插入一个宽幅面的风景图，其宽度比舞台宽度大很多，将风景图的左边界和舞台左边界对齐；(2)在第30帧“插入关键帧动画”，在第30帧，拖动风景图，将该图的右边界和舞台的右边界对齐。
惊艳的HTML5动画特效及源码
惊艳的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基本的动画效果（平移，旋转）在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的转换。
HTML5简易转盘
HTML5简易转盘这⾥我们使⽤两个Canvas进⾏转盘的绘画canvas1⽤于绘画背景，Canvas2⽤于指针的转动；把Canvas2背景设为透明并使⽤相对布局定位：#myCanvas2{position: absolute;background-color: transparent;top:8px;display:block;}<html><head><meta charset="utf-8"><title>转盘</title><style>#myCanvas1{cursor:default;}#myCanvas2{position: absolute;background-color: transparent;top:8px;display:block}</style></head><body><canvas id="myCanvas1" name="myCanvas1" width="320px" height="320px"></canvas><canvas id="myCanvas2" name="myCanvas2" width="320px" height="320px"></canvas><button onclick="start()" id="start">重新</button></body></html><script>var t=50;var ID1=null;var ID2;//⽤于当t为0时，还要转动多少次才减速来设置随机var times;//statu状态为0:t--;1:t++;2:t=0var statu=0;var ctx=document.getElementById("myCanvas1").getContext("2d");var ctx2=document.getElementById("myCanvas2").getContext("2d");var bg=new Image();bg.src="1.png";//如果不使⽤onload⽽直接drawImage()在chrome中可能⽆法显⽰出来bg.onload=function(){ctx.drawImage(bg,0,0);}var gang=new Image();gang.src="2.png";gang.onload=function(){ //把canvas2的原点坐标设为（160,160）,即canvas1的中⼼ctx2.translate(160,160); //第⼆张图的⼤⼩为33*69，⾃⼰算⼀下位置吧ctx2.drawImage(gang,-16,-70);}function start(){times=Math.floor(Math.random()*16+1);document.getElementById("start").disabled=true;ID2=setInterval(function(){if(statu==0){t--;if(t==0){statu=2;}if(t<0){statu=1;}}else if(statu==1)t++;else if(statu==2){if(times>0){t=0;times--;}elsestatu=1;}if(t>60){clearInterval(ID1);clearInterval(ID2);statu=0;t=50;document.getElementById("start").disabled=false;return ;}if(ID1)clearInterval(ID1); //每隔⼀定时间对canvas2进⾏擦写并重绘第⼆幅图ID1=setInterval(function(){ctx2.clearRect(-160,-160,320,320);ctx2.rotate(22.5 * Math.PI / 180);ctx2.drawImage(gang, -16, -70);},t);},100);}</script>注：html5中translate的作⽤是把canvas的原点移动指定的位置，rotate的作⽤是把canvas按原点旋转⼀定⾓度初学HTML5也是第⼀次做转盘，逻辑和图⽚都有点上不了台⾯，只是提供个想法，不喜勿喷啊。
HTML5+CSS3 制作动画转动特效
<div id="intro_text">
<div style="width:300px; padding:65px 0 0 40px;">
<h2>动画介绍</h2>
<p> 动画是一种小孩子喜爱的东西，很灵动。英文有：animation、cartoon、animatedcartoon。其中，比较正式的"Animation"一词源自于拉丁文字根的anima，意思为灵魂；动词animate是赋予生命，引申为使某物活起来的意思。所以animation可以解释为经由创作者的安排，使原本不具生命的东西像获得生命一般的活动...</p>
<div id="menu"><ul>
<li class="home"> <a href="">
<script language="javascript" type="text/javascript">
od_displayImage('myImg1', 'images/home', 80, 99, '', 'Variable Opacity Rules');
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
html转动的圆圈,CSS圆形旋转效果纯CSS制作圆形旋转菜单效果（七步完成）
html转动的圆圈,CSS圆形旋转效果纯CSS制作圆形旋转菜单效果（七步完成）我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这⾥我们打破了常规的思维，把菜单做成圆形的。
在这⾥我们不得不克服⼏个问题：如何定义html如何悬停定位菜单元素在此之前先看⼀下最终效果是怎样的，DEMO放在前⾯主要是增加⼤家阅读的兴趣。
下⾯就让我们开始今天的教程吧第⼀步：构建HTML在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表⽰要构建的结构：每个顶部的矩形框都与下⾯⼤圆中的⼀个⼩圆相联系，当把⿏标悬停在矩形框上时，对应的⼩圆旋转到菜单的顶部。
⽽实现这个功能的难点就是怎样实现悬停在⼀个元素上从⽽影响另⼀个元素的表现状态。
为解决这个问题，让我们看看下⾯的HTML：复制代码代码如下:target我们希望通过⿏标悬停在anchor上来改变target段落的颜⾊，如果你对hover的远程操作有⼀个基本的概念，你可能会先写出下⾯的css代码：复制代码代码如下:a:hover p { color: blue;}这段代码不能达到我们的预期效果，观察上⾯HTML代码，我们要改变颜⾊的元素和⿏标悬停的元素分别在不同的div中，这⽆形中增加了我们实现的难度，所以需要改变HTML结构如下，把两个元素分别放在同⼀个div下：复制代码代码如下:target把两个元素分别放在同⼀个div下，anchor和target作为同级元素可以进⾏以下操作复制代码代码如下:a:hover + p { color: blue;}以上就实现了⿏标悬停在a上⾯，并且使紧临它的同级元素改变颜⾊。
具体应⽤：运⽤上⾯的知识到本教程案例中，我们可以想出⼀个可⾏的结构，⾸先创建3个嵌套div，分别命名class为wrapper, menu和circle.复制代码代码如下:在menu div⾥⾯设置4个锚点，分别有不同的class，在circle div⾥⾯是⼀个包含4个数字的ul li元素复制代码代码如下:1234让我们⽤⼀张图⽚来更清晰的理解上⾯所描述的结构第⼆步：wrapper div的css上⾯的HTML代码⾃此就书写完毕，下⾯主要的是css的问题，⾸先我们定义⼀些基本的样式：复制代码代码如下:* {margin: 0;padding: 0;-webkit-backface-visibility: hidden;}/*WRAPPER*/.wrapper {position: relative;margin: 20px auto;width: 3670px;}第三步：circle div的css这⼀步我们将定义⼀个⼤圆，⽤css制作圆是很简单的我们只需要把元素的宽度和⾼度设置成相等，然后把border的宽度设置成50%就⾏了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如何用HTML5实现图片转圈的动画效果
我们大家都知道让画面动起来就会让画面显得更加的生动好看，今天小编就给大家分享一下如何用HTML5实现图片转圈的动画效果，对该问题感兴趣或者是对HTML开发感兴趣的小伙伴就随小编一起来了解一下吧。
具体代码如下：
<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
@keyframes btnRotate{
from{transform: rotateZ(0);}
to{transform: rotateZ(360deg);}
}
}
@include ani-btnRotate;
#circle{
position: absolute;
left: 50%;
width: REM(338);
height: REM(338);
margin-top: REM(200);
margin-left: REM(-338/2);
transform-origin: center center ;
animation: btnRotate 1s 1s linear forwards;
}
以上就是小编给大家分享的如何用HTML5实现图片转圈的动画效果，希望对小伙伴们有帮助，想要了解更多关于HTML开发方面问题的小伙伴可以登录扣丁学堂官网咨询。