奥门新浦京官方网站20 个超酷的 HTML5/CSS3 应用及源码

本文由码农网 –
小峰原创,转载请看清文末的转发须要,接待参与大家的付费投稿安排!

奥门新浦京官方网站 1

HTML5的确能够营造出特别灿烂的网页动漫效果,特别是应用HTML5
Canvas天性和HTML5
3D个性,我们更是能够欣赏到超酷的卡通特效。今日笔者从html5tricks网址上整合治理了8款无不侧目的HTML5
Canvas动漫教程,大家能够协同来看看。

或是你见过HTML5图纸破碎动画特效,完成的规律也挺简单的。可是你应当没有见过摄像也得以破碎重新整合,那么些HTML5动漫正是利用Canvas的相干特性,完结了点击鼠标让摄像破碎重新整合的机能。在摄像区域点击鼠标,就可以让该区域的摄像破碎,让后透过风姿洒脱段时间后,破碎的区域又可以结合还原,视觉效果非常屌。

1、HTML5录制破碎重新整合特效,强盛视觉冲击HTML5录制播放器超多,可是HTML5录像特效还是非常少见的,那款HTML5录制破碎重新整合特效非常激情,给人强盛的视觉冲击。点击录像大肆地点,HTML5将会将那一个区域击碎,过黄金时代段时间,那么些被击碎的摄像碎片又将自行重组。是豆蔻梢头款特别正确的HTML5摄像特效。在线演示
/ 源码下载2、HTML5 3D
Google搜索,小盒子大世界
HTML5真是能令人想像万千,居然动起了Google找出的呼声,它利用HTML5本领将谷歌找寻放到了二个小盒子里,弄起了3D寻找。随着鼠标移动,HTML5
3D寻找盒子也就转动,非常立体。点击寻找开关,就能够张开盒子举行谷歌寻觅。在线演示
/
源码下载3、CSS3/jQuery创意盒子动画菜单用作前端开荒者,各式各样的jQuery菜单见过繁多,那款jQuery/CSS3菜单却是别具大器晚成格,菜单项嵌入到九宫格中,像小盒子同样,加上自个儿的背景,菜单全部外观特别憨态可居。点击菜单项,盒子就能够进展,体现该菜单项具体的开始和结果。该CSS3菜单在举办时也可能有准确的卡通片效果。在线演示
/
源码下载4、华丽的HTML5图形,可呈现实时数据HTML5在图纸应用中也非常宽广,比起早前的网页图表,HTML5图片制作更简便,作用越来越强有力。那款HTML5图纸插件外观特别头昏眼花和规范,在数量体现地方也很有优势,图表不止帮忙多维数据显示,何况援救区域选择数据成效,利用该HTML5图形能够越发有扶植地保管你的数据。在线演示
/
源码下载5、HTML5重力影响游戏,甩甩领导的头像快过大年了,薪俸没涨多少吗,年初奖没发呢,恨领导呢。以往应用这款HTML5重力影响游戏来尽情甩领导的头像吧。制作一些你痛恨的领导们的头像图片,利用该HTML5引力影响游戏插件来拖动鼠标甩动这几个头像,叫您不加工资…叫你不加薪酬…在线演示
/ 源码下载6、HTML5
3D立体图形旋转播放体现
从今HTML5才能的现身,大家得以在浏览器上看出更加的多的3D特效。那款HTML5
3D立体图形旋转播放呈现工具就反映了精锐的HTML5
3D作用。当然那亟需援助HTML5
3D功能的浏览器本事收看那一个3D图片演示。在线演示 /
源码下载7、HTML5中华夏儿女民共和国象棋游戏,自定义象棋难度棋牌游戏在棋类游戏中早已丰盛成熟,中华夏儿女民共和国象棋的版本也相当多。几前段时间那款基于HTML5技艺的中国象棋游戏极其有特点,大家不但还不错中国象棋的娱乐难度,并且可以切换棋盘的体制。程序写累了,喝上意气风发杯咖啡,和Computer博弈几把吧,相信那HTML第55中学华人民共和国象棋游戏的兑现算法你相比较清楚,能够打开源码来商讨一下那款HTML5中华夏族民共和国象棋游戏。在线演示
/
源码下载8、HTML5播放器故事,卡式磁带式古典播放器那是豆蔻年华款样式特别古典,但又是拾贰分时髦的HTML5播放器,说它是古典播放器,是因为这种卡式磁带式的HTML5播放器相比古老,说它时尚,是因为今后的HTML5播放器很稀少这种体制的,特别有创新意识。假设您想给你的私有重大增多意气风发款本性化的播放器,那么那款HTML5卡式磁带式古典播放器能够筛选一下,个人认为那是HTML5播放器的传说,极其优良。在线演示
/
源码下载9、HTML5精品玛丽游戏重体验,HTML5游乐出色还记得儿时联手玩过的超级MaryTCG游戏吗?是的,那是我们小时候相当的火的生龙活虎款游戏,前日老外利用HTML5本领让一级Mary可以在网页上跑了,HTML5版的一级玛丽即使从未原版的成效强盛,然而借使你风野趣,完全能够把它写康健了。HTML5真的很刚劲,HTML5游戏方面更为尖锐。在线演示
/ 源码下载10、罗曼蒂克程序员HTML5和蔼招亲动漫小编们程序猿在追求亲情方面也是可怜性感的,上边是三个HTML5和蔼求亲动画,画面特别和谐甜蜜,那样的创意十分轻易打动女孩,假若你是独立的程序猿,也神速来制作本人的慈悲招亲动漫吗。在线演示
/
源码下载11、CSS3密码强度验证表单,码速表样式我们在网站上注册会员时,输入八个有力异常的大的密码会大大扩展帐号安全性,那么什么样的密码才相比较安全吗?那款CSS3密码强度验证表单插件能够提醒您近些日子输入密码的安全等级,风趣的是该密码强度验证插件的体制相像码速表,随着密码强度的加大,码速表指针就能够顺时针旋转,当然旋转的特效是运用CSS3整合jQuery达成的。在线演示
/ 源码下载12、纯CSS3 Android
Logo动漫绘制,小手还有或许会动
选用CSS3方可绘制非常多繁琐的油画图标,明日就使用纯CSS3达成Android
LogoLogo,该CSS3 Android
Logo主要利用了CSS3中的圆角等属性,绘制出来的Logo极其逼真,同时该Android
Logo还应该有动漫效果,鼠标滑过Android小人的头和手时,小手仍是能够够摇拽。在线演示
/
源码下载13、纯CSS3发光登陆表单小编们见过无数CSS3表单,制作都丰富可观,今天牵线的那款CSS3表单不但外观华丽,并且伴有颜色发光动漫。当鼠标激活表单时,表单相近就相会世颜色渐变的发光动漫,合作湖蓝的背景,整个CSS3表单显得煞是艳丽。更要紧的是,那么些CSS3发光表单基本用CSS3达成,超级少的JS代码,在CSS3引擎上优化特别精通。在线演示
/ 源码下载14、CSS3 3D进程条按钮18款能够样式大家在网页上付出数据的时候常常拜访到进度条,然则大多数进程条都以在网页其余地点显得,例如弹出一个窗口。那款CSS3贯彻的进程条是体现在按键上的,能够更加直观的体现出顾客提交的快慢景况,该CSS3进程条开关样式极度非凡,在扶植3D的浏览器上还是能够有3D立体的功力,并且进程条表现情势超级多,风流罗曼蒂克共18种样式。在线演示
/
源码下载15、HTML5水波荡漾动画特效在现实生活中,大家日常能够看来水波的功效,雨露落到小河中,河里必定泛起了水波。前天我们用HTML5效仿了水波荡漾效果,点击河水的图样,就能够从点击处开头泛起水波,并向远方伸展。那个利用HTML5仿照出来的水波效果非常逼真,然则有一点点耗CPU。在线演示
/
源码下载16、HTML5雨点下跌动漫,让雨点飞起来利用HTML5贯彻雨点下降须要专心一下几点:1、雨点的高低和形态;2、雨点下降的进度序调整制,注意相应是加快下降。那一个演示动漫就很活泼的模拟了雨点下落动漫。当鼠标移上去时,就能够产生3个雨点并向下掉落。HTML5技艺确实特别便于。在线演示
/
源码下载17、HTML5吃豆人游戏PCMAN前日又要介绍风华正茂款不错的HTML5游乐,HTML5吃豆人游戏,画面上有三个吃豆人和一堆怪物,你供给调整吃豆人活动吃掉路上的小豆子,风流倜傥旦吃豆人境遇怪物被吃掉的时候,你就GAME
OVETiggo了。那款HTML5嬉戏还应该有点没到家,正是吃豆人蒙受怪物的时候无法被怪物吃掉,风野趣的同窗能够继承把它全面。HTML5游乐支付不独有需求工夫,也急需创新意识。在线演示
/
源码下载18、HTML5像素粉碎图片动漫,图片洒落后生可畏地这款HTML5图纸动漫特效你相对想不到,它将一张图纸破裂成多数像素颗粒,点击图片后,这几个像素颗粒边掉落在地上,继续点击,粉碎的像素图片颗粒又会重新整合成完全的图形。用HTML5本事完结这种图片打碎效果依然挺轻易的,有乐趣的同学能够下载源码来学学。在线演示
/
源码下载19、HTML5太空中作战机游戏,呼之欲出那又是风流倜傥款制作能够的HTML5玩耍,该HTML5戏耍的中坚是生机勃勃架英勇威武的太空中作战机,走入游戏后按”Z”键发射子弹,解除敌机。该HTML5战机游戏的特征是:1、游戏画面拾贰分华侈逼真,而且出席声音成分,让游戏特别动人;2、游戏成分比相当多,敌机类型和发射子弹类型也超多,让游戏发烧友不会干瘪。在线演示
/
源码下载20、HTML5动画图片播放器,高级大气我们见过好些个图形播放插件,非常多都基于jQuery。后天介绍的HTML5图纸播放器异常特殊,它不只在图纸间切换有连接动漫效果,何况在切换时图片中的成分也将面世动画效果,比如图中的文字移动、征服、重新整合等。那款HTML5动漫图片播放器算得上是高等大气上档期的顺序。在线演示
/ 源码下载关怀ITeye官方微博 @ITeye官微,得到更加多更新资源音讯。

1、3D HTML5 Logo动画 HTML5多见识3D旋转动漫

HTML5
3D动漫落成起来杰出有助于,以前介绍过基于jQuery的3D旋转插件是使用多张多视角图片播放来得以达成的,而后天享受的这款HTML5
3D旋转动漫是利用纯HTML5工夫落成的,该动画片实现了HTML5 Logo旋转的成效。

奥门新浦京官方网站 2

在线演示        源码下载

奥门新浦京官方网站 3

2、HTML5版Flappy Bird游戏 仅65行Javascript代码

Flappy Bird相信大家都很熟知了,二零一四年最紧俏的手游之生机勃勃。Flappy
Bird那款游戏是一个人出自越南社会主义共和国麦纳麦的单独游戏开垦者阮哈东开拓,格局简单但难度超高的休闲游戏,十分轻便令人上瘾。明日大家用HTML5来重写那款Flappy
Bird游戏,值得注意的是,利用Phaser框架,只需65行Javascript代码就能够兑现HTML5版的Flappy
伯德游戏。按空格键调节小鸟,试试看吗。

奥门新浦京官方网站 4

在线演示        源码下载

在线演示源码下载

3、HTML5 WebGL水面水波荡漾特效 可多视角体现 超逼真

事情未发生前已经向各位分享过风姿洒脱款很逼真的HTML5水波荡漾特效,效果还算不错。前些天再向大家大吃大喝大器晚成款更为给力的HTML5水波动漫,画面上是一个大水池,水池底部是生龙活虎颗大石头,在水面上点击就可以泛起水波,加上模拟光的照射,水波比上大器晚成款特效特别活跃传神。此外你也得以拖动石头让其在池底滚动,也足以拖动漫面多视角见到该HTML5水波动漫。

奥门新浦京官方网站 5

在线演示        源码下载

HTML代码

<div style="display:none">
        <video id="sourcevid" autoplay="true" loop="true">
            <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
            <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
        </video>
        <canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
<center>
    <div style="z-index:1;position:relative;text-align:center;font-size:16px;font-weight:bold;width:1000px;top:60px;">Click video to blow it up!</div>
    <canvas id="output" width="1000" height="600" onmousedown="dropBomb(event, this)" style="border: 0 none">        </canvas>
</center>
</div>

4、HTML5版切水果游戏 HTML5游戏精品

这是黄金时代款由百度JS小组提供的HTML5版切水果游戏,记得切水果游戏当年十一分火,明日自身找到了黄金年代款基于HTML5落实的网页版切水果游戏。即使和原版的切水果游戏相比较功效不怎么康健,然则该HTML5切水果游戏也算活泼,画面也卓殊华侈。

奥门新浦京官方网站 6

在线演示        源码下载

JavaScript代码

var video;
var copy;
var copycanvas;
var draw;

var TILE_WIDTH = 32;
var TILE_HEIGHT = 24;
var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var PAINTRECT = {x:0, y:0, width:1000, height:600};

function init(){
    video = document.getElementById('sourcevid');
    copycanvas = document.getElementById('sourcecopy');
    copy = copycanvas.getContext('2d');
    var outputcanvas = document.getElementById('output');
    draw = outputcanvas.getContext('2d');
    setInterval("processFrame()", 33);
}
function createTiles(){
    var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
    var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
    var y=0;
    while(y < SOURCERECT.height){
        var x=0;
        while(x < SOURCERECT.width){
            var tile = new Tile();
            tile.videoX = x;
            tile.videoY = y;
            tile.originX = offsetX+x;
            tile.originY = offsetY+y;
            tile.currentX = tile.originX;
            tile.currentY = tile.originY;
            tiles.push(tile);
            x+=TILE_WIDTH;
        }
        y+=TILE_HEIGHT;
    }
}

var RAD = Math.PI/180;
var randomJump = false;
var tiles = [];
var debug = false;
function processFrame(){
    if(!isNaN(video.duration)){
        if(SOURCERECT.width == 0){
            SOURCERECT = {x:0,y:0,width:video.videoWidth,height:video.videoHeight};
            createTiles();
        }
        //this is to keep my sanity while developing
        if(randomJump){
            randomJump = false;
            video.currentTime = Math.random()*video.duration;
        }
        //loop
        if(video.currentTime == video.duration){
            video.currentTime = 0;
        }
    }
    var debugStr = "";
    //copy tiles
    copy.drawImage(video, 0, 0);
    draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

    for(var i=0; i<tiles.length; i++){
        var tile = tiles[i];
        if(tile.force > 0.0001){
            //expand
            tile.moveX *= tile.force;
            tile.moveY *= tile.force;
            tile.moveRotation *= tile.force;
            tile.currentX += tile.moveX;
            tile.currentY += tile.moveY;
            tile.rotation += tile.moveRotation;
            tile.rotation %= 360;
            tile.force *= 0.9;
            if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
                tile.moveX *= -1;
            }
            if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
                tile.moveY *= -1;
            }
        }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
            //contract
            var diffx = (tile.originX-tile.currentX)*0.2;
            var diffy = (tile.originY-tile.currentY)*0.2;
            var diffRot = (0-tile.rotation)*0.2;

            if(Math.abs(diffx) < 0.5){
                tile.currentX = tile.originX;
            }else{
                tile.currentX += diffx;
            }
            if(Math.abs(diffy) < 0.5){
                tile.currentY = tile.originY;
            }else{
                tile.currentY += diffy;
            }
            if(Math.abs(diffRot) < 0.5){
                tile.rotation = 0;
            }else{
                tile.rotation += diffRot;
            }
        }else{
            tile.force = 0;
        }
        draw.save();
        draw.translate(tile.currentX, tile.currentY);
        draw.rotate(tile.rotation*RAD);
        draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
        draw.restore();
    }
    if(debug){
        debug = false;
        document.getElementById('trace').innerHTML = debugStr;
    }
}

function explode(x, y){
    for(var i=0; i<tiles.length; i++){
        var tile = tiles[i];

        var xdiff = tile.currentX-x;
        var ydiff = tile.currentY-y;
        var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);

        var randRange = 220+(Math.random()*30);
        var range = randRange-dist;
        var force = 3*(range/randRange);
        if(force > tile.force){
            tile.force = force;
            var radians = Math.atan2(ydiff, xdiff);
            tile.moveX = Math.cos(radians);
            tile.moveY = Math.sin(radians);
            tile.moveRotation = 0.5-Math.random();
        }
    }
    tiles.sort(zindexSort);
    processFrame();
}
function zindexSort(a, b){
    return (a.force-b.force);
}

function dropBomb(evt, obj){
    var posx = 0;
    var posy = 0;
    var e = evt || window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    var canvasX = posx-obj.offsetLeft;
    var canvasY = posy-obj.offsetTop;
    explode(canvasX, canvasY);
}

function Tile(){
    this.originX = 0;
    this.originY = 0;
    this.currentX = 0;
    this.currentY = 0;
    this.rotation = 0;
    this.force = 0;
    this.z = 0;
    this.moveX= 0;
    this.moveY= 0;
    this.moveRotation = 0;

    this.videoX = 0;
    this.videoY = 0;
}

/*
    getPixel
    return pixel object {r,g,b,a}
*/
function getPixel(imageData, x, y){
    var data = imageData.data;
    var pos = (x + y * imageData.width) * 4;
    return {r:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}
}
/*
    setPixel
    set pixel object {r,g,b,a}
*/
function setPixel(imageData, x, y, pixel){
    var data = imageData.data;
    var pos = (x + y * imageData.width) * 4;
    data[pos] = pixel.r;
    data[pos+1] = pixel.g;
    data[pos+2] = pixel.b;
    data[pos+3] = pixel.a;
}
/*
    copyPixel
    faster then using getPixel/setPixel combo
*/
function copyPixel(sImageData, sx, sy, dImageData, dx, dy){
    var spos = (sx + sy * sImageData.width) * 4;
    var dpos = (dx + dy * dImageData.width) * 4;
    dImageData.data[dpos] = sImageData.data[spos];     //R
    dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
    dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
    dImageData.data[dpos+3] = sImageData.data[spos+3]; //A
}
</script>

在线演示源码下载

5、CSS3 飘带菜单 超酷3D CSS3菜单

前面我们享受过众多爱不忍释的CSS3美食指南,CSS3/jQuery创新意识盒子动漫菜单、CSS3垂直菜单
菜单有立体动画视觉、CSS3多级下拉菜单
弹性张开下拉卡通片。后日要享受的那款CSS3菜单极度非常,菜单是呈飘带状的,鼠标滑过菜单项时,菜单项会呈现出来,表现的要命立体饱满。

奥门新浦京官方网站 7

在线演示        源码下载

6、HTML5跳伞游戏 看哪个人先安全降落榜面

今日自家再来分享大器晚成款风趣的HTML5娱乐,HTML5跳伞游戏,是黄金时代款非常不利的HTML5闲散小游戏,主要行使了HTML5的重力影响效果。游戏风华正茂共三个游戏者,主假若比什么人先安全降名落孙山面,紫黄色连续信号灯亮时,按下“X”键最初降落,然后再按“X”键展开降落伞开展安全降落,你要求调节好机会来按下“X”键和对手们比什么人先安全降落。大家也得以在底下下载源代码学习共享。

奥门新浦京官方网站 8

在线演示        源码下载

7、HTML5录像播放器Video.Js 播放器外观可自定义

原先我们都以运用flash来制作录像播放器,未来HTML5日渐升高起来了,我们也得以接纳HTML5来塑造播放器。前几天给大家介绍生龙活虎款HTML5播放器Video.Js,改HTML5摄像播放器能够温和定义外观,包蕴完全颜色,播放按键定制等成效。总体来讲,Video.Js是黄金年代款非常不利的摄像播放器。

奥门新浦京官方网站 9

在线演示        源码下载

8、HTML5叶子飘落动漫 HTML5动漫片卓越

前边大家分享四款精髓的HTML5动漫片:HTML5友善求婚动漫、HTML5摄像破碎重新组合特效、HTML5像素粉碎图片动漫。今日再来分享风度翩翩款HTML5霜叶飘落动漫,那款HTML5叶子飘落动漫是遵照webkit内核的,所以需求webkit内核的浏览器工夫播放该卡通,效果的确特别酷。

奥门新浦京官方网站 10

在线演示        源码下载

上述正是8款丑态毕露的HTML5 Canvas动漫特效,迎接收藏分享。

本文由html5tricks搜集整理,转发请必须保留原来的书文链接

Canvas性格和HTML5
3D本性,大家特别能够赏玩到超酷的卡通片特效。今天本身从ht…

发表评论

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