HTML5+css实现一个超好看的动态web照片墙
一、简介
一个纯css制作的动态照片墙
二、使用
- 可以根据自己的需要,修改style.css;如添加图片,修改图片位置等
- 参数如下
- -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也可自行更改;
赞赞赞!