css3实现照片墙

阅读：评论：0

css3实现照片墙

在网站上经常可以看到照片墙的展示，于是动手用css3写了一个简单的照片墙。其实就是css3样式的一些新特效的使用。

作品展示：

接下来贴上实现的代码：

html结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>照片墙</title><link rel="stylesheet" href="css/index.css">
</head>
<body>
<h1 class="title">照片墙</h1>
<div class="container"><img class="pic img1" src="images/1.jpg" alt=""><img class="pic img2" src="images/2.jpg" alt=""><img class="pic img3" src="images/3.jpg" alt=""><img class="pic img4" src="images/4.jpg" alt=""><img class="pic img5" src="images/5.jpg" alt=""><img class="pic img6" src="images/6.jpg" alt=""><img class="pic img7" src="images/7.jpg" alt=""><img class="pic img8" src="images/8.jpg" alt=""><img class="pic img9" src="images/9.jpg" alt=""><img class="pic img10" src="images/10.jpg" alt="">
</div></body>
</html>

css修饰样式：

body{background-color: #EEEEEE;
}
.title{display: block;text-align: center;margin:40px auto;
}
.container{width:1000px;margin:60px auto;height:450px;position: relative;
}
.pic{width:160px;
}
.container .pic{padding:10px 10px 15px;background-color: #fff;border: 1px solid #ddd;box-shadow: 2px 2px 3px rgba(50,50,50,0.4);position: absolute;z-index: 1;transition: all 0.5s ease-in;-webkit-transition:all 0.5s ease-in;;-moz-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;
}
.container .pic:hover{transform: rotate(0deg);-webkit-transform: rotate(0deg) scale(1.2);z-index: 2;background-color: #d3fcff;}
.container .img1{left:400px;top:0px;transform: rotate(-5deg);-webkit-transform: rotate(-5deg);
}
.container .img2{left:600px;top:0px;transform: rotate(-20deg);-webkit-transform: rotate(-20deg);
}
.container .img3{bottom: 0px;top:0px;transform: rotate(5deg);-webkit-transform: rotate(5deg);
}
.container .img4{left: 407px;top: 256px;transform: rotate(-10deg);-webkit-transform: rotate(5deg);
}
.container .img5{left: 207px;top:284px;transform: rotate(-10deg);-webkit-transform: rotate(-10deg);}
.container .img6{left: 0px;top:280px;transform: rotate(10deg);-webkit-transform: rotate(10deg);
}
.container .img7{left: 850px;top:0px;transform: rotate(20deg);-webkit-transform: rotate(20deg);
}
.container .img8{left: 801px;top: 264px;transform: rotate(5deg);-webkit-transform: rotate(5deg);
}
.container .img9{left: 623px;top: 262px;transform: rotate(15deg);-webkit-transform: rotate(15deg);
}
.container .img10{left: 200px;top:0px;transform: rotate(-10deg);-webkit-transform: rotate(-10deg);
}

其中用到的主要属性是transform和transition。

我用到了一个属性z-index，这个属性主要是为了鼠标经过时图片会显示最上层，别忘了加上position，不然的话这个属性就不起作用。

本文发布于:2024-02-03 23:51:20，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170697924851829.html

上一篇：Cesium扩散墙

下一篇：css3 图片展示墙

标签：照片

留言与评论（共有 0 条评论）