创意代码块活动接近尾声了,也是最后一篇文章,就做(水)个照片墙收尾吧。
https://code.juejin.cn/pen/7086770006444212255
实现比较简单,一个比较暖色的背景,图片使用transform: rotate
旋转后凌乱摆放,:hover
的时候用transform: scale
将图片放大,并且覆盖掉原来的旋转使其回正,transition: all 1s
让其有过渡的效果
ps: 图片来源自掘金里面的链接,掘金酱的头像和掘金吉祥物等
html
<div class="box">
<img class="img1" src="https://p9-passport.byteacctimg.com/img/user-avatar/e3a142ceef01d6d640ac417a16f127f6~300x300.image">
<img class="img2" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/168e0858b6ccfd57fe5~tplv-t2oaga2asx-no-mark:180:180:180:180.awebp" >
<img class="img3" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc94bddd46584710a0bb0ebb53f070c3~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp" >
<img class="img4" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de2ab00b319c4da780c2c9442356a2b2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?">
<img class="img5" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26c13483395945ab9d72d893fc4bb395~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" >
<img class="img6" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a026d003fe5445bbffb781a1cf24c92~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" >
</div>
css
body {
background-color: #F5F5DC;
}
.box {
margin: auto;
width: 1000px;
height: 90vh;
position: relative;
}
.box img {
border: 1px solid white;
padding: 10px;
width: 300px;
box-shadow: 1px 1px 5px #666;
border-radius: 10px;
transition: all 1s;
}
.box img:hover {
transform: scale(1.5,1.5);
z-index: 1;
}
.img1 {
position: absolute;
top: 100px;
left: 300px;
transform: rotate(45deg);
}
.img2 {
position: absolute;
top: 248px;
left: 142px;
transform: rotate(-25deg);
}
.img3 {
position: absolute;
top: 97px;
left: 472px;
transform: rotate(15deg);
}
.img4 {
position: absolute;
top: 280px;
left: 531px;
transform: rotate(-65deg);
}
.img5 {
position: absolute;
top: 133px;
left: 93px;
transform: rotate(40deg);
}
.img6 {
position: absolute;
top: 393px;
left: 318px;
transform: rotate(-30deg);
}
最终效果如下:
比较简单的一个照片墙,也没有做动态图片的随机摆放(考虑到不止6张图片),仅以此祝掘金创意代码块活动完满成功,码上掘金越办越好,产出越来越多的优质代码块。