图片墙动画效果

Posted 米娜-火箭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片墙动画效果相关的知识，希望对你有一定的参考价值。

CSS3 transition实现超酷图片墙动画效果

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 transform初体验之demo5</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        a,a:hover{
            text-decoration:none;
        }
        .box{
            width:960px;
            height:450px;
            margin:60px auto 0;
            font-size:0.75em;
            position:relative;
        }
        .title{
            position:absolute;
            padding:15px 40px;
            font-size:2em;
            border:1px solid #bbbbbb;
            background:white;
            -webkit-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4);
            -moz-box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4);
            box-shadow:4px 4px 3px rgba(50, 50, 50, 0.4);
            left:330px;
            top:100px;
            z-index:1;
        }
        .pic{
            display:block;
            padding:10px 10px 15px;
            background:white;
            border:1px solid #bfbfbf;
            -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
            -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
            box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
            -webkit-transition:all 0.5s ease-in;
            position:absolute;
        }
        .pic img{
            display:block;
            margin-bottom:10px;
            border:0;
        }
        .pic:hover,.pic:focus,.pic:active{
            border-color:#9a9a9a;
            -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
            -moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
            -webkit-transform:rotate(0deg) scale(1.05);
            -moz-transform:rotate(0deg) scale(1.05); transform:rotate(0deg) scale(1.05);
            z-index:1;
        }
        .pic1{bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg);}
        .pic2{top: 50px; right: 20px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg);}
        .pic3{left: 400px; top: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg);}
        .pic4{top: 10px; left: 495px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg);}
        .pic5{bottom: 0; right: 0; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); transform: rotate(1deg);}
        .pic6{bottom: 10px; right: 156px; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); transform: rotate(6deg);}
        .pic7{bottom:0; left:400px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg);}
        .pic8{bottom: -20px; left: 700px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);}
        .pic9{bottom: 0; left: 0; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);}
        .pic10{top: 0; left: 20px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); transform: rotate(8deg);}
        .pic11{top: 0; right: 0; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);}
        .pic12{top: 0; left: 680px; -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); transform: rotate(18deg);}
        .pic13{bottom: -20px; right: 630px; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); transform: rotate(4deg);}
        .pic14{top: 90px; left: 430px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);}
        .pic15{left:176px; top:20px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);}
    </style>
</head>

<body>
<div class="box">
    <h1 class="title">CSS3超酷美女图片墙</h1>
    <div id="box">
        <script type="text/javascript">
            var box = document.getElementById("box");
            var pics = "";
            for(var i=1; i<=15; i+=1){
                var random_width = 100+ 106*Math.random();
                pics += \'<a href="#zhangxinxu" class="pic pic\'+i+\'"><img style="min-height:75px;" width="\'+random_width+\'" src="image/mm\'+i+\'.jpg" /></a>\';
            }
            box.innerHTML = pics;
        </script>
    </div>
</div>
</body>
</html>

自己试了都写成活的，但是有点问题，明天修改：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 transform初体验之demo5</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        a,a:hover{
            text-decoration:none;
        }
        .box{
            width:960px;
            height:450px;
            margin:60px auto 0;
            font-size:0.75em;
            position:relative;
        }
        .title{
            position:absolute;3D动画效果照片墙demo


 ppt中的三维效果怎么使用


 CSS动画篇之炫酷时钟之时钟墙


 js如何做动画效果


 jQuery垂直切换相册图片js动画效果


 js动画效果代码方法