CSS3动画效果之照片墙

最新推荐文章于 2023-01-31 16:26:50 发布

qq_33151859

最新推荐文章于 2023-01-31 16:26:50 发布

阅读量2.6k

点赞数 1

分类专栏： HTML基础编程题文章标签：动画 css3 html

本文链接：https://blog.csdn.net/qq_33151859/article/details/52794533

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>照片墙</title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<!---------------------标题-------------------------------------------->
<h1>照片墙</h1>
<!---------------------照片墙------------------------------------------->
<div class="container">
	<img class="pic1" src="../img/照片墙/照片1.jpg" />
    <img class="pic2" src="../img/照片墙/照片2.jpg" />
    <img class="pic3" src="../img/照片墙/照片4.jpg" />
    <img class="pic4" src="../img/照片墙/照片3.jpg" />
    <img class="pic5" src="../img/照片墙/照片5.jpg" />
    <img class="pic6" src="../img/照片墙/照片6.jpg" />
    <img class="pic7" src="../img/照片墙/照片7.jpg" />
    <img class="pic8" src="../img/照片墙/照片9.jpg" />
    <img class="pic9" src="../img/照片墙/照片8.jpg" />
    <img class="pic10" src="../img/照片墙/照片12.jpg" />
    <img class="pic11" src="../img/照片墙/照片11.jpg" />  
    <img class="pic12" src="../img/照片墙/照片13.jpg" />
    <img class="pic13" src="../img/照片墙/照片14.jpg" />
    <img class="pic14" src="../img/照片墙/照片16.jpg" />
    <img class="pic15" src="../img/照片墙/照片18.jpg" />
    
</div>
</body>
</html>

position:absolute;
		top:180px;
		left:30px;@charset "utf-8";
/* CSS Document */
body{ background-color:#CCC;}
h1{ text-align:center;}
.container{ margin:0 auto; position:relative; 
			width:1000px;}
img{ background:#000;
		padding:5px;
		transition:all 0.35s;}
img:hover{ 
			transform:rotate(0deg);
			transform:scale(1.2,1.2);
			box-shadow:5px 5px;
			z-index:2;}
.pic1{ transform:rotate(-15deg);
		
		position:absolute;
		top:60px;
		left:10px;
		z-index:1;
		
		}

.pic2{ transform:rotate(-15deg);
		position:absolute;
		top:60px;
		left:180px;}

.pic3{ transform:rotate(15deg);
		position:absolute;
		top:60px;
		left:400px;
		z-index:1;}

.pic4{ transform:rotate(-20deg);
		position:absolute;
		top:60px;
		left:550px;}

.pic5{ transform:rotate(20deg);
		position:absolute;
		top:60px;
		left:750px;}

.pic6{ transform:rotate(15deg);
		position:absolute;
		top:300px;
		left:20px;
		z-index:1;}

.pic7{ transform:rotate(-15deg);
		
		position:absolute;
		top:300px;
		left:210px;}

.pic8{ transform:rotate(-20deg);
		position:absolute;
		top:300px;
		left:450px;
		z-index:1;}

.pic9{ transform:rotate(-20deg);
		position:absolute;
		top:300px;
		left:600px;}

.pic10{ transform:rotate(20deg);
		position:absolute;
		top:300px;
		left:800px;}

.pic11{ transform:rotate(-30deg);
		position:absolute;
		top:500px;
		left:20px;
		z-index:1;
		
		}

.pic12{ transform:rotate(15deg);
		position:absolute;
		top:500px;
		left:250px;}

.pic13{ transform:rotate(-30deg);
		position:absolute;
		top:550px;
		left:400px;
		z-index:1;}

.pic14{ transform:rotate(15deg);
		position:absolute;
		top:520px;
		left:650px;
}

.pic15{ transform:rotate(-20deg);
			position:absolute;
		top:580px;
		left:800px;}