整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

分享8个难忘的HTML5炫酷动画

TML5的强大之处不仅在于让网页元素更加灵活多变,更在于它可以很方便地实现各种网页动画特效,让你的网站更加富有现代化特色。就现在的浏览器而言,已经基本都支持HTML5了,所以这也方便了我们开发者免去了考虑浏览器兼容性的头疼问题。今天要分享一些令人难忘的HTML5炫酷动画,希望大家会喜欢。

分享之前我先推荐下我自己的web前端学习交流群:675498134,不管你是小白还是大神,我都欢迎你们过来学习交流,不定期分享干货,包括我自己整理的最新的前端资料和教程送给大家,欢迎初学和进阶中的小伙伴,一起学习一起交流,共同进步。

1、HTML5火球挡板碰撞动画游戏

今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动,你可以移动鼠标滑动屏幕下方的挡板,火球碰撞到挡板后,即可反弹出去,这是个很有特色的HTML5游戏。

2、HTML5/CSS3圆盘秒表动画 秒表可暂停计时

今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程中暂停计时,同时秒表可以随时重置。

3、3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗?这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本,在原来的基础上,衣服布料呈3D环形显示,你同样可以用鼠标拖拽衣服,不过和之前不同的是,鼠标左键用来拖拽衣服,鼠标右键用来切割衣服,失去了之前鼠标用力程度和衣服破碎程度的关系,似乎功能上有所缺失,但是HTML5 3D功能还是不错的。

4、纯CSS3实现超酷的磁带动画

记得之前分享过一款HTML5磁带式古典播放器,效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观,还是相当逼真的,然后用CSS3的动画属性实现了磁带的旋转,就像在播放歌曲一样,如果配合HTML5的音频播放功能,就和那个磁带播放器差不多了。

5、HTML5仿Apple Watch时钟动画

Apple Watch刚刚发布不久,就已经有国外的大牛将其时钟表盘界面用HTML5模仿出来了,并且这款HTML5仿Apple Watch的时钟是动态的,可以根据本地时间实时更新指针数据。时钟的界面非常华丽,确实有苹果的风格,HTML5也的确非常强大。

6、纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果,我们只需要将鼠标滑过灯泡,整个灯泡就会出现发光发亮的动画特效,效果相当逼真。CSS3的运用,让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

7、HTML5动感的火焰燃烧动画特效

这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,比如:HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外。

8、CSS3图片倾斜效果 可倾斜四个角度

今天我们再来分享一款CSS3图片特效,它可以让网页上的图片倾斜任意的角度,其实在CSS3中实现图片的倾斜非常简单,我们并不需要利用复杂的JS计算各种角度,只要用CSS3的transition属性即可完成图片的倾斜效果,非常简单,具体实现大家可以看DEMO演示。

分享到这里就告一段落了,学习web前端的朋友可以来我的群,群里每天都有对应资料学习:675498134,欢迎初学和进阶中的小伙伴。

在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验。本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感兴趣的HTML5动画,一起来看看。

1、CSS3飘带状3D菜单

菜单带小图标这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。

2、HTML5/CSS3 3D纸片折叠动画

今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知识。这是一款纸片折叠动画特效,利用HTML5和CSS3的相关特性,我们可以将一张张纸片折叠起来,形成很酷的3D动画效果。

3、HTML5 webkit 3D立方体图片旋转滑块应用

今天再来分享一款HTML5 3D立方体动画,这个只是一个3D效果模型,你可以用图片替换演示中的立方体4个面,这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了,由于是基于webkit的,所以有浏览器限制,Google Chrome最佳。

4、HTML5颜色渐变3D文字特效

之前我们已经分享过不少HTML5文字特效,效果都还不错,尤其是这款HTML5摆动的文字特效类似柳枝摆动,更是有非常酷的文字动画效果。今天我们要分享一款HTML5 3D文字特效,文字的颜色是渐变的,同时有文字阴影,更加凸显了3D立体的效果。

5、HTML5 3D图片阴影翻转动画

今天我们要分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和之前分享的HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果,大家也可以看看。

6、纯CSS3 3D按钮按钮酷似牛奶般剔透

CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。

7、CSS3 3D发光切换按钮

刚刚我们发布过一款CSS3开关切换滑动按钮,应该说出了有点3D立体的效果外,其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮,它不仅具有3D的效果,而且可以发光,当开关处于打开状态时,旁边的小灯就会亮起来,然后灯光投射到开关上,效果挺逼真的。

8、CSS3 3D弹性按钮

今天要分享的这款CSS3按钮和这款按钮差不错,也同样拥有3D的效果,按钮在按下时带有弹性质感。

微信搜索“IT之家”关注抢6s大礼!下载IT之家客户端(戳这里)也可参与评论抽楼层大奖!

VG 动画有很多种实现方法,也有很大SVG动画库,现在我们就来介绍 svg动画实现方法都有哪些?

一、SVG 的 animation

SVG animation 有五大元素,他们控制着各种不同类型的动画,分别为:

  • set
  • animate
  • animateColor
  • animateTransform
  • animateMotion

1.1、set

set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。

使用语法:

<set attributeName="" attributeType="" to="" begin="" />
  • attributeName :是要改变的元素属性名称。
  • attributeType :是表明attributeName属性值的列表,支持三个固定参数 CSS/XML/auto,如x,y以及transform属于XML,opacity属于CSS。auto是浏览器自动判别的意思,也是默认值,如果你不知道该选哪个就填auto,浏览器自己判别。
  • to :动画结束的属性值。
  • begin :动画延迟时间。

eg:绘制一个半径为200的圆,4秒之后,半径变为50。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基础的动画元素,实现单属性的过渡效果。

使用语法:

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>
  • from :过渡效果的属性开始值。
  • to:过渡效果的属性结束值。
  • begin:动画开始时间。
  • dur:动画过渡时间,控制动画速度。
  • repeatCount:动画重复次数。

eg:绘制一个半径为200的圆,4秒之后半径在2秒内从200逐渐变为50。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制颜色动画,animate也可以实现这个效果,所以该属性目前已被废弃。

1.4、animateTransform

实现transform变换动画效果,与css3的transform变换类似。实现平移、旋转、缩放等效果。

使用语法:

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>
  • repeatCount:重复次数,设置为 indefinite 表示无限循环,一直执行。
  • type:添加 transform 变换类型。
  • eg:绘制一个半径为200的圆,4秒之后开始缩放,在2秒内从1.5缩小到0倍。
<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定义动画路径,让SVG各个图形,沿着指定路径运动。

使用语法:

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>
  • path:定义路径,使用语法与《HTML5(八)——SVG 之 path 详解》path的d属性一致。
  • begin:延迟时间。
  • dur:动画执行时间。

eg:绘制一个半径为10的圆,延迟4秒从左上角运动的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

实际制作动画的时候,动画太单一不酷,需要同时改变多个属性时,上边的四种元素可以互相组合,同类型的动画也能组合。以上这些元素虽然能够实现动画,但是无法动态地添加事件,所以接下来我们就看看 js 如何制作动画。

二、JavaScript 控制

上篇文章我们介绍js可以操作path,同样也可以操作SVG的内置形状元素,还可以给任意元素添加事件。

给SVG元素添加事件方法与普通元素一样,可以只用on+事件名 或者addEventListener添加。

eg:使用SVG绘制地一条线,点击线条地时候改变 x1 ,实现旋转效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload = function(){
  var line = document.getElementById("line")
  line.onclick = function(){
   let start = parseInt(line.getAttribute("x1")),
       end=400,dis = start-end
   requestAnimationFrame(next)
   let count = 0;
   function next(){
    count++
    let a = count/200,cur = Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG动画,主要利用 requestAnimationFrame 来实现一帧一帧的改变。

我们上述制作的 SVG 图形、动画等,运行在低版本IE中,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素,样式中还需要添加 behavier ,经常用于绘制地图。由于使用太麻烦,所以我们借助 Raphael.js 库。

三、Raphaël.js (拉斐尔)

Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形,在IE浏览器中使用VML,非IE浏览器使用SVG,类似于jquery,本质还是一个javascript库,使用简单,容易上手。

使用之前需要先引入Raphael.js库文件。cdn的地址为:https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、创建画布

Rapheal有两种创建画布的方式:

第一种:浏览器窗口上创建画布

创建语法:

var paper = Raphael(x,y,width,height)

x,y是画布左上角的坐标,此时画布的位置是绝对定位,有可能会与其他html元素重叠。width、height是画布的宽高。

第二种:在一个元素中创建画布

创建语法:

var paper = Raphael(element, width, height);

element是元素节点本身或ID width、height是画布的宽度和高度。

3.2、绘制图形

画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为:

paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径
paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径

eg:在div中绘制一个圆形,一个椭圆、一个矩形。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

运行结果如下:

除了简单图形之外,还可以绘制复杂图形,如三角形、心型,这时就使用path方法。

使用语法:paper.path(pathString)

pathString是由一个或多个命令组成,每个命令以字母开始,多个参数是由逗号分隔。

eg:绘制一个三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

还可以绘制文字,如果需要换行,使用 \n 。

文字语法:paper.text(x,y,text)

(x,y)是文字坐标,text是要绘制的文字。

3.3、设置属性

图形绘制之后,我们通常会添加stroke、fill、stroke-width等让图形更美观,Raphael使用attr给图形设置属性。

使用语法:circle.attr({"属性名","属性值","属性名","属性值",...})

如果只有属性名没有属性值,则是获取属性,如果有属性值,则是设置属性。

注意:如果只设置一个属性时,可以省略‘{}’。如:rect.attr('fill','pink')

eg:给上边的矩形添加边框和背景色。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 let rect = paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件:
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件,只要在前面加上“un”就可以了(unclick、undblclick)。

使用语法:

obj.click(function(){
 //需要操作的内容
})

3.5、添加动画

animate为指定图形添加动画并执行。

使用语法:

obj.animate({
 "属性名1":属性值1,
 "属性名2":属性值2,
  ...
},time,type)

属性名和属性值就根据你想要的动画类型加就ok。

time:动画所需时间。

type:指动画缓动类型。常用值有:

  • linear - 线性渐变
  • ease-in | easeIn | < - 由慢到快
  • ease-out | easeOut | > - 由快到慢
  • ease-in-out | easeInOut | <> - 由慢到快再到慢
  • back-in | backIn - 开始时回弹
  • back-out | backOut - 结束时回弹
  • elastic - 橡皮筋
  • bounce - 弹跳

eg:点击矩形,矩形缓缓变大。

<div id="box"></div>
<script>
 var paper = Raphael("box",800,500)
 let rect = paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

复制上边的代码,分别在各个浏览器和低版本IE浏览器运行,发现都可以正常运行。SVG的动画库挺多了,我们介绍了拉斐尔,有兴趣的小伙伴可以自行找找其他库。