您的位置：首页 > Web前端 > HTML5

照片墙效果

2017-03-08 17:45 141 查看

摘要: 无js，纯h5与css3

看到照片墙的效果，对着教程来了一遍。源码如下：

html代码（注意在head里面引入css文件）：

<body>
<div class="contain">
<img class="pic pic1" src="img/1.jpg"/>
<img class="pic pic2" src="img/2.jpeg"/>
<img class="pic pic3" src="img/3.jpg"/>
<img class="pic pic4" src="img/4.jpg"/>
<img class="pic pic5" src="img/5.jpg"/>
<img class="pic pic6" src="img/6.jpeg"/>
</div>
</body>

css：

.contain{
margin: 100px 300px;
position: absolute;
}
.pic{
width: 200px;
}
.contain img{
padding: 10px 6px;
background: #E3E3E3;
border: 1px solid #737373;
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
position: relative;
z-index: 1;
}
.contain img:hover{
box-shadow: 10px 10px 15px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
z-index:2;
}
.pic1{
transform: rotate(-10deg);
-webkit-transform: ratate(-10deg);
}
.pic2{
transform: rotate(10deg);
-webkit-transform: ratate(10deg);
}.pic3{
transform: rotate(-3deg);
-webkit-transform: ratate(-3deg);
}.pic4{
transform: rotate(15deg);
-webkit-transform: ratate(15deg);
}.pic5{
transform: rotate(-12deg);
-webkit-transform: ratate(-12deg);
}
.pic6{
transform: rotate(-10deg);
-webkit-transform: ratate(-10deg);
}

效果图（在鼠标移入图片上的时候图片放大且位置移入最上面）：

技术亮点：

1、鼠标移入变大且以一定的速度慢慢变大变小：transition: all 0.5s ease-in；

0.5是变化的时间，时间越长，速度越慢。上面的代码是把各个浏览器的兼容性处理了，所以有很多种。

2、图片倾斜摆放： transform: rotate(10deg); -webkit-transform: ratate(10deg);

但是transform兼容性极低，对于IE11以下的浏览器均没有效果，在chrome，firfox完全适用。

3、图片跻身于最前面：z-index属性

这个属性很神奇，相当于把网页当成了三维的空间在处理，z是向用户眼前眼神的一轴，z-index值越大，就会显示在越前面，但是它必须依赖了position，不管是相对还是绝对布局都可以，在鼠标移入的时候使当前z-index的值变大。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 css3

相关文章推荐

新的分享

章节导航