<!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. scull 中的设备注册

    在内部, scull 使用一个 struct scull_dev 类型的结构表示每个设备. 这个结构定义为: struct scull_dev { struct scull_qset *data;  ...

  2. https://webpack.js.org/plugins/

    有问题还是看源码 ,看官方文档吧,整一晚上终于整明白了

  3. 聊聊MVC和模块化以及MVVM和组件化

    原文链接 小寒的博客,带你理解更深的世界 面向对象,模块化和MVC 面向对象是指把写程序映射到现实生活,从而一来逻辑性更强,更容易写好代码,二来代码很贴切,通俗易懂,更被人理解,三来更加容易拓展和管理 ...

  4. linux mint & ubuntu 安装QQ国际版

    ubuntu安装QQ相对简单 下载qq国际版deb文件,直接安装即可. 下载地址: http://pan.baidu.com/s/1hqmYzlU 下面就重点说一下linux mint 安装qq. 1 ...

  5. RasieException

    RasieException是SEH API,SEH != 进内核,RasieException并不必然导致用户态内核态切换.事实上这个API被调用以后会首  先尝试在用户态进行处理,如果没有任何处理 ...

  6. Hibernate关联映射（一对多/多对多）

    版权声明:翀版 https://blog.csdn.net/biggerchong/article/details/843401053.  Hibernate关联映射上接Hibernate持久化类:h ...

  7. jun引导1.04可以让N3050支持6.2

    1.03引导用在3050可以安装 但是安装后找不到dsm 需要手动插拔电源才可以解决 偶尔还会死机 1.04可以引导3050安装6.2 23739 安装24922正常,但是moments传照片后会死机 ...

  8. SpringBoot 04_热部署

    热部署应用环境 IDEA2017.2 + MAVEN3.5 + SpringBoot1.5.6 热部署说明 1. devtools会监听classpath下的文件变动,并且会立即重启应用(发生在保存时 ...

  9. Python学习day23-面向对象的编程

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  10. 12_PCA之探究用户对物品类别的喜好细分降维

    案例: 探究:用户对物品类别的喜好细分降维. 背景:把用户分成几个类别,分类的依据是用户购买了哪些物品. 先看商品products.csv数据,有product_id,product_name,ais ...