css3 图片展示墙

阅读：评论：0

css3 图片展示墙

为了进一步练习transform，看网上一个视频，用的他的图片，然后做出来了这个图片展示墙，开心。效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body><h1>图片展示墙</h1><div class="container"><img class="pic1 pic" src="images/mm1.jpg" alt="" /><img class="pic2 pic" src="images/mm2.jpg" alt="" /><img class="pic3 pic" src="images/mm3.jpg" alt="" /><img class="pic4 pic" src="images/mm4.jpg" alt="" /><img class="pic5 pic" src="images/mm5.jpg" alt="" /><img class="pic6 pic" src="images/mm6.jpg" alt="" /><img class="pic7 pic" src="images/mm7.jpg" alt="" /><img class="pic8 pic" src="images/mm8.jpg" alt="" /></div>
</body>
</html>

下面是css.

body{background: #ccc;
}
h1{text-align: center;
}
.container{width: 960px;height: 500px;margin: auto;position: relative;
}
.pic{border: 1px solid #fff;padding: 5px 5px 15px;background: white;transition:all 1s ease-in-out;
}
.pic:hover{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);box-shadow: 10px 10px 5px rgba(0,0,0,0.3);z-index: 2;
}
.pic1{position: absolute;left:40px;top:40px;transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);	
}
.pic2{position: absolute;left:160px;top:170px;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);	
}

后面的几个pic相同，只是旋转的角度不同，和定位不同。

几点收获：

1.更加明白z-index的用法，当hover上去的时候，对应的z-index：2；可以让隐藏在下面的元素到最上面。

2.关于transform:rotate和scale的用法。scale是缩放比例。

3.关于动画，transition.因为这里用了hover，即有事件触发，用transition,否则用animation.

4.关于相对定位，绝对定位，注意z-index必须要设置定位。

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

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

上一篇：css3实现照片墙

下一篇：网站设计艺术性与实用性分析

标签：图片

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