使用CSS3简单实现照片墙效果的代码

2019-09-10 郑州网站建设  

复制代码

代码如下:


<body>
<h2>照片墙制作</h2>
<div class="container">
<img class="img1" src=http://www.divcss5.com/css3-style/"img/img (1).jpg" height="150" width="150" alt="">
<img class="img2" src=http://www.divcss5.com/css3-style/"img/img (2).jpg" height="160" width="200" alt="">
<img class="img3" src=http://www.divcss5.com/css3-style/"img/img (3).jpg" height="170" width="200" alt="">
<img class="img4" src=http://www.divcss5.com/css3-style/"img/img (4).jpg" height="240" width="200" alt="">
<img class="img5" src=http://www.divcss5.com/css3-style/"img/img (5).jpg" height="300" width="300" alt="">
</div>
</body>

CSS(此处省略了浏览器私有属性前缀!)

复制代码

代码如下:


<style>
* {margin:0; padding:0;}
body { background-color: #eee; padding-top: 50px;}
h2 { text-align: center;}
.container { position: relative; width:1000px; height:700px; margin:0px auto; }
img { position: absolute; top:50px; left:100px; cursor: pointer;
padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;
transition:0.5s; box-shadow: 3px 3px 3px #ccc;
}
.img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}
.img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}
.img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}
.img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}
.img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}
img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}
</style>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1905.html转载请标明出处,谢谢合作!
标签:
  • 代码
  • HTML
  • CSS3
  • 复制
  • 如下
  • :
  • Ч
  • bo