威尼斯手机平台登陆-官方网站登录

威尼斯手机平台登陆为您带来世界三大博彩公司最新相关资讯,威尼斯官方网站登录充分考虑到不同地域网民的不同需求,威尼斯手机平台登陆良好的用户界面,人性化的操作,实用的功能设计使其广泛受到欢迎,推动实体出版、影视、动漫、游戏等相关文化产业的发展。

您的位置:威尼斯手机平台登陆 > 前端资源 > 1、HTML5视频破碎重组特效,这款HTML5视频破碎重组特效非常刺激

1、HTML5视频破碎重组特效,这款HTML5视频破碎重组特效非常刺激

发布时间:2020-04-21 16:53编辑:前端资源浏览(143)

    本文由码农网 – 小峰原创,转发请看清文末的转发须求,款待参预大家的付费投稿安顿!

    1、HTML5录像破碎重新组合特效,强盛视觉冲击

    据他们说HTML5的采取以后早就丰裕普及,前日我们就来向大家大饱眼福20款特别灿烂的HTML5/CSS3应用插件。希望大家合意并享受给您的死党们。

    恐怕你见过HTML5图片破碎动漫特效,实现的原理也挺轻松的。可是你应当未有见过录像也能够破碎重新整合,那些HTML5卡通就是使用Canvas的相关特性,实现了点击鼠标让摄像破碎重新整合的作用。在摄像区域点击鼠标,就可以让该区域的录像破碎,让后透过一段时间后,破碎的区域又能够结合还原,视觉效果相当的屌。

    HTML5录像播放器超多,然而HTML5录制特效依然相当少见的,那款HTML5录像破碎重组特效极其激情,给人强盛的视觉冲击。点击摄像大肆地方,HTML5将会将那么些区域击碎,过一段时间,那几个被击碎的录制碎片又将自动重组。是一款非常不错的HTML5录像特效。

    1、HTML5摄像破碎重新整合特效 强盛视觉冲击

    图片 1

    图片 2

    HTML5摄像播放器相当多,然则HTML5摄像特效依然非常少见的,那款HTML5摄像破碎重新组合特效非常激励,给人强大的视觉冲击。点击摄像自便地方,HTML5将会将这个区域击碎,过一段时间,那个被击碎的摄像碎片又将电动重组。是一款极度科学的HTML5摄像特效。

    在线演示源码下载

    在线演示

    图片 3

    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>
    

    源码下载

    在线演示    /    源码下载

    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>
    

    在线演示源码下载

    2、HTML5 3D Google找寻,小盒子大世界

    2、HTML5 3D Google搜索 小盒子 大世界

    HTML5真是能令人虚构万千,居然动起了Google搜索的倡议,它应用HTML5本领将Google寻找放到了一个小盒子里,弄起了3D寻找。随着鼠标移动,HTML5 3D搜索盒子也就转动,特别立体。点击寻觅开关,就可以张开盒子举行谷歌(Google卡塔尔搜索。

    HTML5便是能令人想象万千,居然动起了谷歌(Google卡塔尔国搜索的呼声,它利用HTML5技巧将Google寻觅放到了二个小盒子里,弄起了3D找寻。随着鼠标移动,HTML5 3D寻找盒子也就转动,特别立体。点击寻找开关,就可以张开盒子进行谷歌搜索。

    图片 4

    图片 5

    在线演示

    在线演示    /    源码下载

    源码下载

    3、CSS3/jQuery创新意识盒子动漫菜单

    3、CSS3/jQuery创意盒子动漫菜单

    用作前端开辟者,丰富多彩的jQuery菜单见过不菲,那款jQuery/CSS3菜单却是不落俗套,菜单项嵌入到九宫格中,像小盒子相仿,加上本身的背景,菜单全体外观非常可喜。点击菜单项,盒子就能进行,显示该菜单项具体的剧情。该CSS3菜单在举行时也会有不错的卡通片效果。

    用作前端开荒者,各种各样的jQuery菜单见过众多,那款jQuery/CSS3菜单却是不名一格,菜单项嵌入到九宫格中,像小盒子同样,加上本人的背景,菜单全体外观特别动人。点击菜单项,盒子就博览会开,体现该菜单项具体的内容。该CSS3菜单在开展时也可能有不利的动漫效果。

    图片 6

    图片 7

    在线演示    /    源码下载

    在线演示

    4、富华的HTML5图表 可兆示实时数据

    源码下载

    HTML5在图片应用中也万分广阔,比起早前的网页图表,HTML5图形制作更简便,功效更苍劲。那款HTML5图形插件外观特别华丽和标准,在数量展现地点也很有优势,图表不唯有援救多维数据体现,並且支持区域选用数据效用,利用该HTML5图形能够尤其便利地管理你的多少。

    4、华丽的HTML5图纸,可突显实时数据

    图片 8

    HTML5在图纸应用中也要命大范围,比起从前的网页图表,HTML5图纸制作更便利,功用更刚劲。那款HTML5图纸插件外观特别富华和正规,在数额显示地方也很有优势,图表不仅仅扶助多维数据呈现,并且补助区域选用数据功效,利用该HTML5图纸能够越发有益地保管你的多少。

    在线演示    /    源码下载

    图片 9

    5、HTML5重力影响游戏 甩甩领导的头像

    在线演示

    快度岁了,报酬没涨多少吧,年初奖没发啊,恨领导吗。未来接纳那款HTML5重力影响游戏来尽情甩领导的头像吧。制作一些你愤恨的经理们的头像图片,利用该HTML5重力影响游戏插件来拖动鼠标甩动这几个头像,叫你不加报酬…叫您不加薪俸…

    源码下载

    图片 10

    5、HTML5重力影响游戏,甩甩领导的头像

    在线演示    /    源码下载

    快过年了,薪水没涨多少吗,年初奖没发啊,恨领导呢。今后利用那款HTML5引力感应游戏来尽情甩领导的头像吧。制作一些您憎恨的管理者们的头像图片,利用该HTML5重力影响游戏插件来拖动鼠标甩动这个头像,叫您不加薪给…叫你不加薪金…

    6、HTML5 3D立体图形旋转播放体现

    图片 11

    自打HTML5本事的面世,大家能够在浏览器上看出更加的多的3D特效。那款HTML5 3D立体图形旋转播放显示工具就显示了强硬的HTML5 3D功能。当然那须要接济HTML5 3D功用的浏览器技术阅览那几个3D图片演示。

    在线演示

    图片 12

    源码下载

    在线演示    /    源码下载

    6、HTML5 3D立体图形旋转播放展示

    7、HTML5中黄炎子孙民共和国象棋游戏 自定义象棋难度

    自从HTML5本事的产出,大家得以在浏览器上观看越来越多的3D特效。那款HTML5 3D立体图形旋转播放呈现工具就反映了强硬的HTML5 3D成效。当然那亟需支持HTML5 3D功效的浏览器能力见到这一个3D图片演示。

    牌类游戏在棋牌游戏中早就十一分成熟,中国象棋的版本也比比较多。后天那款基于HTML5技巧的中华夏族民共和国象棋游戏特别常有特点,大家不但可以选择中黄炎子孙民共和国象棋的游玩难度,何况能够切换棋盘的体裁。程序写累了,喝上一杯咖啡,和计算机博弈几把吧,相信那HTML5中华夏族民共和国象棋游戏的完成算法你相比较清楚,能够展开源码来切磋一下那款HTML5中中原人民共和国象棋游戏。

    图片 13

    图片 14

    在线演示

    在线演示    /    源码下载

    源码下载

    8、HTML5播放器轶闻卡式磁带式古典播放器

    7、HTML5中夏族民共和国象棋游戏,自定义象棋难度

    那是一款样式特别古典,但又是可怜风尚的HTML5播放器,说它是古典播放器,是因为这种卡带式的HTML5播放器比较古老,说它前卫,是因为今后的HTML5播放器很稀少这种体制的,特别有新意。假诺您想给您的私有重大加多一款天性化的播放器,那么那款HTML5卡式磁带式古典播放器能够筛选一下,个人以为那是HTML5播放器的逸事,特别精华。

    牌类游戏在棋类游戏中曾经特别成熟,中华夏儿女民共和国象棋的本子也超级多。明日那款基于HTML5技巧的中中原人民共和国象棋游戏非常有特点,大家不但可以筛选中国象棋的娱乐难度,何况能够切换棋盘的体裁。程序写累了,喝上一杯咖啡,和微处理机博弈几把吧,相信这HTML5中华夏族民共和国象棋游戏的实现算法你相比清楚,能够张开源码来研讨一下那款HTML5中国象棋游戏。

    图片 15

    图片 16

    在线演示    /    源码下载

    在线演示

    9、HTML5最棒玛丽游戏重体验 HTML5玩耍特出

    源码下载

    还记得儿时同步玩过的一级Mary角色扮演游戏吗?是的,那是大家时辰候极流行的一款游戏,今日老外利用HTML5才能让一级玛丽可以在网页上跑了,HTML5版的拔尖Mary纵然还没原版的功用强大,可是一旦你风乐趣,完全能够把它写完备了。HTML5真的很苍劲,HTML5娱乐方面越来越尖锐。

    8、HTML5播放器传说,卡带式古典播放器

    图片 17

    那是一款样式非常古典,但又是丰裕风尚的HTML5播放器,说它是古典播放器,是因为这种卡式磁带式的HTML5播放器相比古老,说它前卫,是因为以后的HTML5播放器很稀少这种体制的,特别有新意。假设您想给您的民用重大增多一款本性化的播放器,那么那款HTML5卡式磁带式古典播放器能够选拔一下,个人感到那是HTML5播放器的神话,特别精粹。

    在线演示    /    源码下载

    图片 18

    10、罗曼蒂克程序员HTML5爱心求亲动漫

    在线演示

    我们程序员在追招亲情方面也是特别罗曼蒂克的,下边是一个人同学利用协和所学的HTML5知识自制的HTML5温和求婚动漫,画面十三分慈悲甜蜜,那样的新意超级轻松打动女孩,倘使你是独立的程序猿,也尽快来创设自身的慈详表白动漫吗。

    源码下载

    图片 19

    9、HTML5至上Mary游戏重体验,HTML5戏耍优异

    在线演示    /    源码下载

    还记得儿时伙同玩过的一流Mary格斗游戏吗?是的,那是大家时辰候比极红的一款游戏,几天前老外利用HTML5手艺让一流Mary能够在网页上跑了,HTML5版的一流Mary即使从未原版的成效强盛,不过借使您风乐趣,完全能够把它写康健了。HTML5真的很有力,HTML5玩耍方面进一层尖锐。

    11、CSS3密码强度验证表单 码速表样式

    图片 20

    我们在网址上登记会员时,输入叁个精锐不小的密码会大大扩充帐号安全性,那么怎么样的密码才比较安全吧?那款CSS3密码强度验证表单插件能够唤起您日前输入密码的安全等第,风趣的是该密码强度验证插件的体制相仿码速表,随着密码强度的加大,码速表指针就能够顺时针旋转,当然旋转的特效是行使CSS3重新组合jQuery实现的。

    在线演示

    图片 21

    源码下载

    在线演示    /    源码下载

    10、罗曼蒂克程序员 HTML5温和招亲动漫

    12、纯CSS3 Android Logo动漫绘制 小手还只怕会动

    咱俩技士在追提亲情方面也是相当性感的,下边是叁个HTML5友善招亲动漫,画面十二分友比非常的甜蜜,那样的新意超级轻松打动女孩,假设您是单身的技士,也赶紧来制作本身的慈详招亲动漫吗。

    采取CSS3能够绘制超级多参差不齐的图案Logo,今日就利用纯CSS3贯彻Android LogoLogo,该CSS3 Android Logo首要运用了CSS3中的圆角等属性,绘制出来的Logo极度逼真,相同的时候该Android Logo还应该有动漫效果,鼠标滑过Android小人的头和手时,小手仍然为能够够摇摆。

    图片 22

    图片 23

    在线演示

    在线演示    /    源码下载

    源码下载

    13、纯CSS3发光登陆表单

    本文固定链接: 

    我们见过多数CSS3表单,制作都非凡奇妙,后天介绍的那款CSS3表单不但外观华丽,并且伴有颜色发光动漫。当鼠标激活表单时,表单周边就能现身颜色渐变的发光动漫,同盟青黄的背景,整个CSS3表单显得万分艳丽。更重要的是,那么些CSS3发光表单基本用CSS3贯彻,超级少的JS代码,在CSS3引擎上优化特别生硬。

    图片 24

    在线演示    /    源码下载

    14、CSS3 3D进程条按键18款能够样式

    笔者们在网页上交给数据的时候时有的时候会见到进程条,可是繁多进程条都是在网页别之处显得,比如弹出叁个窗口。那款CSS3落到实处的进度条是显得在按键上的,能够更加直观的呈现出客户提交的速度情形,该CSS3进程条开关样式极度了不起,在支撑3D的浏览器上还是能够有3D立体的机能,并且进程条表现方式超多,一共18种样式。

    图片 25

    在线演示    /    源码下载

    15、HTML5水波荡漾动漫特效 特别逼真

    在现实生活中,大家平日能够观望水波的功效,雨露落到小河中,河里必定泛起了水波。今日我们用HTML5模拟了水波荡漾效果,点击河水的图形,就可以从点击处初叶泛起水波,并向国外伸展。这一个应用HTML5仿照出来的水波效果特别逼真,可是有个别耗CPU。

    图片 26

    在线演示    /    源码下载

    16、HTML5雨点下降动画让雨点飞起来

    使用HTML5兑现雨点下跌供给当心一下几点:1、雨点的轻重和造型;2、雨点下降的进度序调控制,注意相应是加快下落。这一个演示动漫就很生动的比葫芦画瓢了雨点下降动漫。当鼠标移上去时,就能产生3个雨点并向下掉落。HTML5技艺真正特别有利。

    图片 27

    在线演示    /    源码下载

    17、HTML5吃豆人游戏PCMAN

    明天又要介绍一款不错的HTML5游乐,HTML5吃豆人游戏,画面上有一个吃豆人和一批怪物,你必要调整吃豆人活动吃掉路上的小豆子,一旦吃豆人境遇怪物被吃掉的时候,你就GAME OVE本田CR-V了。那款HTML5游乐还恐怕有有些没到家,便是吃豆人相见怪物的时候无法被怪物吃掉,有野趣的同室可以继续把它周详。HTML5游玩开垦不仅仅须求本事,也急需创新意识。

    图片 28

    在线演示    /    源码下载

    18、HTML5像素破裂图片动画图片洒落一地

    那款HTML5图纸动漫特效你相对不敢相信,它将一张图纸打碎成繁多像素颗粒,点击图片后,这么些像素颗粒边掉落在地上,继续点击,粉碎的像素图片颗粒又会重组成完全的图片。用HTML5本领完成这种图片破裂效果依然挺简单的,风野趣的同桌能够下载源码来上学。

    图片 29

    在线演示    /    源码下载

    19、HTML5太空中作战机游戏 活灵活现

    那又是一款制作精美的HTML5戏耍,该HTML5游戏的栋梁是一架英勇威武的太空中作战机,步向游戏后按”Z”键发射子弹,消弭敌机。该HTML5战机游戏的风味是:1、游戏画面非常富华逼真,何况参加声音成分,让游戏尤其使人陶醉;2、游戏成分超级多,敌机类型和发射子弹类型也相当多,让游戏发烧友不会干瘪。

    图片 30

    在线演示    /    源码下载

    20、HTML5动漫图片播放器 高档大气

    笔者们见过超级多图纸播放插件(大旨图),非常多都根据jQuery。后天牵线的HTML5图纸播放器异常特别,它不光在图片间切换有联网动漫效果,並且在切换时图片中的成分也将现出动漫效果,例如图中的文字移动、打垮、重组等。这款HTML5动漫图片播放器算得上是高档大气上档案的次序。

    图片 31

    在线演示    /    源码下载

    本文由威尼斯手机平台登陆发布于前端资源,转载请注明出处:1、HTML5视频破碎重组特效,这款HTML5视频破碎重组特效非常刺激

    关键词:

上一篇:尤其是Canvas技术的应用,付费投稿计划

下一篇:没有了