多视角3D可旋转的HTML5 Logo动画

澳门新葡亰赌995577 8

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的澳门新葡亰赌995577,付费投稿计划!

HTML5非常酷,利用HTML5制作动画简直让我们忘记了这世界上还有flash的存在。今天我们要分享的一些HTML5动画都还不错,有些动画设计还是挺别出心裁的。另外,每一款HTML5动画都提供源代码下载,并且我们对源码作一些简单的分析。

这是一款基于HTML5和CSS3的3D动画特效,与之前的3D特效不同的是,这款是完全用HTML5特性实现的,而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转,从而可以从多个视角来观察HTML5
Logo。

HTML5画图特效 超酷的笔刷动画

这是一款基于HTML5的画笔动画,可以选择不同的笔刷形状,笔刷在画布上移动时就会播放非常绚丽的动画效果。

核心jQuery代码:

澳门新葡亰赌995577 1澳门新葡亰赌995577 2

var H = 0;    $('.button').bind('mousedown touchstart',function(e) {    $('.clicked').removeClass('clicked');    $(this).addClass('clicked');  });    $(document).bind('mousemove touchmove',function(e) {      e.preventDefault();      var drawSize = 55;      var drawType = $('.clicked').html();      var floatTypes = Array('floatOne','floatTwo','floatThree','floatFour','floatFive');      var floatType = floatTypes[Math.floor(Math.random()*floatTypes.length)];      var xPos = e.originalEvent.pageX;      var yPos = e.originalEvent.pageY;            $('body').append('<div   +drawSize+'px;left:'+xPos+'px;top:'+yPos+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;color:hsla('+H+',100%,70%,1)">'+drawType+'</div>');          $('.draw').each(function() {        var div = $(this);        setTimeout(function() {$(div).remove();},800);      });  });    setInterval(function() {    if(H<=360) {H++;}    else {H=0;}  },10);

View Code

澳门新葡亰赌995577 3

在线演示        源码下载

澳门新葡亰赌995577 4

HTML5可爱的404页面动画 很逗的机器人

利用HTML5绘制的机器人,还会动哦。你可以将它作为一个富有创意的404页面。

核心CSS3代码:

澳门新葡亰赌995577 5澳门新葡亰赌995577 6

@-webkit-keyframes move {    0%, 100% {      -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);      transform: rotate(0deg) translate3d(0px, 0px, 0px);    }      25% {      -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);      transform: rotate(5deg) translate3d(5px, 5px, 0px);    }      75% {      -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);      transform: rotate(-6deg) translate3d(-5px, 5px, 0px);    }  }    @keyframes move {    0%, 100% {      -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);      transform: rotate(0deg) translate3d(0px, 0px, 0px);    }      25% {      -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);      transform: rotate(5deg) translate3d(5px, 5px, 0px);    }      75% {      -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);      transform: rotate(-6deg) translate3d(-5px, 5px, 0px);    }  }

View Code

澳门新葡亰赌995577 7

在线演示        源码下载

在线演示源码下载

HTML5/jQuery 3D焦点图插件 多种超酷切换动画

焦点图是很传统的jQuery插件,但是这款焦点图基于HTML5,动画特效更加丰富。

 

澳门新葡亰赌995577 8

在线演示        源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图