HTML5 之图片墙

来源：互联网发布：mac os x 10.12下载编辑：程序博客网时间：2024/04/28 00:10

html代码通过以下代码就能实现一个HTML5制作的图片墙

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>picture wall</title>    <link type="text/css" href="style.css" rel="stylesheet"></head><body><div class="container">    <img src="img/1.jpg" class="pic pic1">    <img src="img/2.jpg" class="pic pic2">    <img src="img/3.jpg" class="pic pic3">    <img src="img/4.jpg" class="pic pic4">    <img src="img/5.jpg" class="pic pic5">    <img src="img/6.jpg" class="pic pic6">    <img src="img/7.jpg" class="pic pic7">    <img src="img/8.jpg" class="pic pic8">    <img src="img/9.jpg" class="pic pic9"></div></body></html>

CSS代码

* {    margin: 0;    padding: 0;}body {    background-color: #eeeeee;}.container {    width: 960px;    height: 450px;    margin: 60px auto;    position: relative;}.container .pic {    width: 160px;}.container img:hover {    z-index: 2;    box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);    transform: rotate(0deg) scale(1.20);    -webkit-transform: rotate(0deg) scale(1.2);}.container img {    padding: 10px 10px 15px;    background: white;    border: 1px solid #ddd;    box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);    z-index: 1;    -webkit-transition: all 0.5s ease-in;    -moz-transition: all 0.5s ease-in;    -ms-transition: all 0.5s ease-in;    -o-transition: all 0.5s ease-in;    transition: all 0.5s ease-in;    position: absolute;}.pic1 {    left: 400px;    right: 0;    transform: rotate(-50deg);    -webkit-transform: rotate(-5deg);}.pic2 {    left: 200px;    right: 0;    transform: rotate(-20deg);    -webkit-transform: rotate(-20deg);}.pic3 {    bottom: 100px;    right: 100;    transform: rotate(5deg);    -webkit-transform: rotate(5deg);}.pic4 {    bottom: 0px;    right: 0;    transform: rotate(-10deg);    -webkit-transform: rotate(-10deg);}.pic5 {    bottom: 0px;    right: 0;    transform: rotate(-5deg);    -webkit-transform: rotate(-5deg);}.pic6 {    left: 0px;    right: 0;    transform: rotate(20deg);    -webkit-transform: rotate(20deg);}.pic7 {    left: 850px;    right: 0;    transform: rotate(-0deg);    -webkit-transform: rotate(10deg);}.pic8 {    bottom: -20px;    right: 650px;    transform: rotate(5deg);    -webkit-transform: rotate(5deg);}.pic9 {    left: 550px;    right: 90px;    transform: rotate(15deg);    -webkit-transform: rotate(15deg);}

效果图

0 0

HTML5 之 图片墙

HTML5 之图片墙