<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>利用JS实现文字的聚合动画效果</title>

    <style>

        .boxWrap1{width: 160px;height: 417px;position: relative;margin:0px auto;}

        .boxWrap1 img{width: 100%;}

        .boxWrap1 div{background: url(http://itakeo.com/wpimg/2_1.png) no-repeat;background-size: 160px auto; position: absolute; left: 0px;top: 0px;

        }

        .boxWrap1.set div{ opacity: 1!important;

            transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;

            -moz-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;

            -webkit-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;

        }

        .boxSiteWrap{ width: 100%;overflow: hidden;height: auto; background: #000;padding: 140px 0}

        .boxSiteWrap button{cursor:pointer;display: block;font-size: 16px; width: 140px;height: 40px; background: #fff;color: #000;border:none;margin:30px auto;}

    </style>

</head>

<body>

<div class="boxSiteWrap">

    <div class="boxWrap1"></div>

    <button>重新加载</button>

</div>

<script>

    window.addEventListener('load',function(){

        ;(function(){

            function init(){

                var box = document.querySelector('.boxWrap1')

                 var c=4,r=8;

                var w = box.offsetWidth/c,h = box.offsetHeight/r;

                for(var i=0;i<r;i++){

                    for(var j=0;j<c;j++) {

                        var _div=document.createElement('div');

                        var _left = j * w,_top = i * h;

                        _div.style.cssText = 'width:'+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) + 'px ' + (-_top) + 'px';

                        _div.style.transition = _div.style.MozTransition = _div.style.WebkitTransition = 'all '+ Random(1,1.8) +'s ease';

                        _div.style.transform = _div.style.MozTransform = _div.style.WebkitTransform = 'perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'

                        box.appendChild(_div);

                    };

                };

                setTimeout(function(){

                    box.classList.add('set')

                },100);

                function Random(start,end){

                    return Math.random()*(end-start)+start;

                };

            };

            init();

            var flag = true;

            document.querySelector('button').onclick = function(){

                if(flag){

                    document.querySelector('.boxWrap1').classList.remove('set')

                    setTimeout(function(){

                        document.querySelector('.boxWrap1').innerHTML = '';

                        init();

                        flag = true;

                    },1200);

                    flag = false;

                };

            };

        })();

    });

</script>

</body>

</html>

demo:https://controllerone.github.io/demo/piece.html

原文链接：http://itakeo.com/blog/2015/12/14/imgcover/?none=123

js图片碎片效果（移动端也适用）的更多相关文章

  1. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  2. js 图片切换效果

    效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  4. JS图片宽度自适应移动端

    $(function(){ $("#d-intro").find("img").each(function () {                $(this ...

  5. JavaScript仿百度图片浏览效果（转载）

    转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...

  6. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  9. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

随机推荐

  1. 查看linux的shhd端口号 netstat | grep sshd

    [root@iZ2zef51hufoaycipfxek8Z ~]# [root@iZ2zef51hufoaycipfxek8Z ~]# netstat | grep sshd [root@iZ2zef ...

  2. LUOGU P4777 【模板】扩展中国剩余定理（EXCRT）

    传送门 解题思路 扩展 $crt​$,就是中国剩余定理在模数不互质的情况下,首先对于方程 ​     $\begin{cases} x\equiv a_1\mod m_1\\x\equiv a_2\m ...

  3. LUOGU P3382 【模板】三分法 (三分)

    传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...

  4. 洛谷P1129 【ZJOI2007】矩阵游戏

    原题传送门 题目描述 小QQ是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N \times NN×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每 ...

  5. 面向对象_访问修饰符_构造与析构函数_this指针

    1:面向对象 以codeblocks举例,在一个工程里面: File-->new -->Class可以建一个类,可以设置类的参数,是否有set get方法,有无构造函数等设置,.h文件主要 ...

  6. 国内平台比特币(Bitcoin)搬砖流程教学

    建议搬砖时要的价差,实际费用与利润请自行计算,避免亏损或白做工请自行拿捏利润. 请搬砖前要先自行操作与确认双边平台的存取速度.利於拿捏时间,避免时间差导致亏损. (所有内容 仅供参考 盈亏自负) 搬砖 ...

  7. opencv-图像类型、深度、通道

    转自:图像类型   与  opencv中图像基础(大小,深度,通道) 一.图像基本类型 在计算机中,按照颜色和灰度的多少可以将图像分为四种基本类型. 1. 二值图像 2. 灰度图像 3. 索引图像 4 ...

  8. Spring注解驱动(上)

    记录常用的spring注解 1.@Configuration 和 @Bean spring中可以使用xml 的方式进行配置, 也可以使用 @ Configuration 来指定一个类为配置类, 并使用 ...

  9. 07_Hibernate多事务并发运行时并发问题检索方式

    什么是事务? 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 事务就是逻辑上的一组操作,要么全都成功,要么全都失败 ...

  10. Python学习day02 - 编程分类和Pycharm和Jupyter的安装

    编程语言分类 编程语言是用来和计算机交互的,计算机只认识0和1 机器语言(低级语言) 直接和硬件交互 用0和1和计算机沟通 优点:执行效率最高 缺点:开发效率低 汇编语言直接和硬件交互 优点(相较于机 ...