js+css3折角邮票图片墙展示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js+css3折角邮票图片墙展示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js+css3折角邮票图片墙展示代码</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="light_first" class="open1">
	<div id="light_second" class="open2"></div>
</div>
<div class="caution">
	<p>欢迎来到油画走廊!</p>
	<p>注意开关在这边呦</p>
</div>
<h1>油画走廊</h1>
<div class="container">
	<div class="on_off">
		<a></a>
	</div>
	<div class="content_photo">
		<img class="img01" src="img/1.jpg">
		<img class="img02"src="img/2.jpg">
		<img class="img03"src="img/3.jpg">
		<img class="img04"src="img/4.jpg">
		<img class="img05"src="img/5.jpg">
		<img class="img06"src="img/6.jpg">
		<img class="img07"src="img/7.jpg">
		<img class="img08"src="img/8.jpg">
		<img class="img09"src="img/9.jpg">
	</div>
</div>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>

JS代码(common.js):

window.onload=function(){
	var light_second=document.getElementById("light_second");
	var light_first=document.getElementById("light_first");
	var h1=document.getElementsByTagName("h1");
	var flag=true;
	light_second.onclick=function(){
	light_first.className=(light_first.className=="close1")?"open1":"close1";
	light_second.className=(light_second.className=="close2")?"open2":"close2";
	if(flag){
	document.body.style.backgroundColor="#2F3238";
	h1[0].style.color="#F5F5F5";
	flag=false;
}
else{
	document.body.style.backgroundColor="#F5F5F5";
	h1[0].style.color="#2F3238";
	flag=true;
}
}
}

CSS代码(style.css):

*{padding:0px;margin:0px;}
body{background:#f5f5f5;}
h1{color:#2F3238;text-align:center;}
.content_photo{margin:60px auto;position:relative;width:1000px;}
img{position:absolute;padding:10px;background:#fff;border:none;border-radius:6px;width:240px;height:160px;/*position:absolute;*/
-webkit-transition:1s;z-index:1;background:radial-gradient( transparent 0px,transparent 4px,white 4px,white );background-size:20px 20px;background-position:-10px -10px;}
img:hover{-webkit-transform:rotate(0deg);-webkit-transform:scale(1.5);-webkit-box-shadow:10px 10px 15px #ccc;z-index:999;border-bottom-right-radius:140px 30px;}
.img01{top:70px;left:350px;transform:rotate(5deg);-o-transform:rotate(5deg);-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);}
.img02{top:-10px;left:530px;-o-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);-moz-transform:rotate(-10deg);}
.img03{top:-30px;left:30px;-o-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);-moz-transform:rotate(-10deg);}
.img04{top:130px;left:60px;-o-transform:rotate(30deg);-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);-moz-transform:rotate(30deg);}
.img05{top:30px;left:180px;-o-transform:rotate(10deg);-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);-moz-transform:rotate(10deg);}
.img06{top:160px;left:560px;-o-transform:rotate(20deg);-webkit-transform:rotate(20deg);-ms-transform:rotate(20deg);-moz-transform:rotate(20deg);}
.img07{top:260px;left:560px;-o-transform:rotate(30deg);-webkit-transform:rotate(-30deg);-ms-transform:rotate(30deg);-moz-transform:rotate(30deg);}
.img08{top:250px;left:50px;-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);}
.img09{top:240px;left:290px;-o-transform:rotate(15deg);-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);-moz-transform:rotate(15deg);}
#light_first{width:90px;height:50px;border-radius:50px;position:fixed;opacity:0.5;top:20px;right:20px;}
#light_second{width:50px;height:50px;border-radius:48px;position:absolute;background:white;box-shadow:0px 2px 4px rgba(0,0,0,0.4);}
.open1{background:rgba(0,184,0,0.8);}
.open2{top:0px;right:1px;}
.close1{background:rgba(255,255,255,0.4);border:1px solid rgba(0,0,0,0.15);border-left:transparent;}
.close2{left:0px;top:0px;border:1px solid rgba(0,0,0,0.1);}
.caution{position:fixed;right:20px;top:90px;}
.caution p:first-child{opacity:0;-ms-animation:dcaution 5s;-moz-animation:dcaution 5s;-webkit-animation:dcaution 5s;}
.caution p:last-child{opacity:0;-webkit-animation:dcaution 5s 5s;-moz-animation:dcaution 5s 5s;-ms-animation:dcaution 5s 5s;}
@-webkit-keyframes dcaution{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes dcaution{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframes dcaution{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}

附件:下载该文件资源,减少时间成本(增值服务)