作品详情

当前位置：首页大赛首页炫酷图片

大赛简介

大赛作品

大赛动态

联系我们

联系人：王秀秀

电话：010 -66083178

网址：www.qxwq.org.cn　

地址：北京市西城区广安门

内广义街5号广益大厦

大赛作品详情

作品名称：炫酷图片
学校名称：邯郸冀南新区银河中等专业学校
参赛队伍：银河护卫2队
参赛学生：杨亚轩
指导老师：王明飞李松宁

详细说明

本次作品的灵感来源于网站的一个页面，当我们点击图片就会实现一下功能比如图片

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlusÂ®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>多彩照片墙</title>
  <link href="css/style.css" rel="stylesheet"/>
 </head>
 <body>
	<div class="container">
		<ul class="img-list">
			<li>
				<img src="images/pic_01.png"/>
			</li>
			<li>
				<img src="images/pic_02.png"/>
			</li>
			<li>
				<img src="images/pic_03.png"/>
			</li>
			<li>
				<img src="images/pic_04.png"/>
				
			</li>
			<li>
				<img src="images/pic_05.png"/>
			</li>
			<li>
				<img src="images/pic_06.png"/>
			</li>
			<li>
				<img src="images/pic_01.png"/>
				
			</li>
			<li>
				<img src="images/pic_02.png"/>
			</li>
			<div class="clear"></div>
		</ul>
	</div>
 </body>
</html>

旋转等等内容，弹出内容

*{padding:0;margin:0;}
.clear{clear:both;overflow:hidden;}
ul{list-style:none;}
.container{width:800px;margin:50px auto;}
.container li{
	float:left;
	width:170px;
	margin:15px 10px;
	padding:5px;
	border-radius:5px;
	box-shadow:0 0 2px rgba(0,0,0,.5);
}

.container li img{
	width:170;
	height:120px;
	border-radius:5px;
	vertical-align:bottom;
}
/**每个li 设置旋转角度**/
.container li:nth-child(1){
	transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
}
.container li:nth-child(2){
	transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-webkit-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
}
.container li:nth-child(3){
	transform:rotate(25deg);
	-ms-transform:rotate(25deg);
	-webkit-transform:rotate(25deg);
	-o-transform:rotate(25deg);
	-moz-transform:rotate(25deg);
}
.container li:nth-child(4){
	transform:rotate(-20deg);
	-ms-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	-moz-transform:rotate(-20deg);
}
.container li:nth-child(5){
	transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
}
.container li:nth-child(6){
	transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-webkit-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
}
.container li:nth-child(7){
	transform:rotate(20deg);
	-ms-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-o-transform:rotate(20deg);
	-moz-transform:rotate(20deg);
}
.container li:nth-child(8){
	transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
}

/**悬浮 旋转为0 放大**/
.container li:hover{
	/*transform:scaleX(2);
	transform:scaleY(2);*/
	transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	-o-transform:scale(1.2,1.2);
	-moz-transform:scale(1.2,1.2);
	/*transform:rotate(10deg) scale(1.2,1.2);
	-ms-transform:rotate(10deg) scale(1.2,1.2);
	-webkit-transform:rotate(10deg) scale(1.2,1.2);
	-o-transform:rotate(10deg) scale(1.2,1.2);
	-moz-transform:rotate(10deg) scale(1.2,1.2);*/
	
}