HTML5+css实现一个超好看的web照片墙源码

HTML5+css实现一个超好看的动态web照片墙

一、简介

一个纯css制作的动态照片墙

二、使用

1. 可以根据自己的需要，修改style.css；如添加图片，修改图片位置等
2. 参数如下

• -moz代表firefox浏览器私有属性；
• -ms代表IE浏览器私有属性；
• -webkit代表chrome、safari私有属性；
• -o代表Opera私有属性。

div>img:nth-of-type(1){
    -webkit-transform: rotate(-20deg);    //-webkit代表chrome、safari私有属性; **旋转 div 角度** 
    -moz-transform: rotate(-20deg);       //-moz代表firefox浏览器
    -ms-transform: rotate(-20deg);        //-ms代表IE浏览器
    -o-transform: rotate(-20deg);         //-o代表Opera私有属性 
    transform: rotate(-20deg);            //旋转 rotate 正数为顺时针旋转，负数为逆时针旋转;
    position:absolute;                    // 绝对定位,指定left
    left:-80px;                     //指定该div的绝对位置
    top:150px;                    
    z-index:5;                      //z-index 属性设置元素的堆叠顺序。
    border-radius:40px;             //设置圆角边框
    opacity:0.8;                    //设置 div 元素的不透明级别：
    filter:alpha(opacity=80);       //IE6 不透明度
}

鼠标指针浮动在上面的元素

div>img:nth-of-type(1):hover{
    -webkit-transform:rotate(0) scale(1.1) translate(80px); //rotate（旋转）、scale（缩放）、translate（平移）
    -moz-transform:rotate(0) scale(1.1) translate(80px);
    -ms-transform:rotate(0) scale(1.1) translate(80px);
    -o-transform:rotate(0) scale(1.1) translate(80px);
    transform:rotate(0) scale(1.1) translate(80px);
    z-index:10;

    -webkit-transition: all 0.5s ease-in-out;     //css3动画执行的快慢
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity:1;
    filter:alpha(opacity=1);
}

二、下载地址

img文件较大,这里只提供css，部分图片请自行添加，图片格式0-15.jpg、bg.jpg也可自行更改；