CSS3模仿的圆角Js弹出框效果，图片盒子

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3模仿的圆角js弹出框</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.radioBoxImages {padding:50px 0 0 35px;}
.rBox img {border:0;height:100px;}
input.pop {position:absolute; left:-9999px;}
.radioBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);}
.radioBox .holder {position:absolute; width:100%; height:100%; left:0; top:0; z-index:50; text-align:center; display:table-cell;}
.radioBox .frame {display:inline-block; margin:50px auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
border-radius:5px 5px 0 0;
opacity:0;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.radioBox .frame .clickLeft {position:absolute; left:15px; top:15px; right:50%; bottom:15px; z-index:110;}
.radioBox .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; height:40px; top:120px; left:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.radioBox .frame .clickLeft:hover .previous {opacity:1;background-color:rgba(0,0,0,.5);color:#fff;}
.radioBox .frame .clickRight {position:absolute; right:15px; top:15px; left:50%; bottom:15px; z-index:110;}
.radioBox .frame .clickRight .next {opacity:0; position:absolute; width:100px; height:40px; top:120px; right:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.radioBox .frame .clickRight:hover .next {opacity:1;background-color:rgba(0,0,0,.5);color:#fff;}
.radioBox .frame .caption {position:absolute; margin-top:10px; left:0; right:0; padding:5px 15px; background:#fff;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.8);
border-radius: 0 0 5px 5px;
}
.radioBox .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;}
.radioBox .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;}
.radioBox .frame .caption h4 span {float:right; font-size:9px;}
.radioBox .large {display:inline-block; position:relative; z-index:100; border:1px solid #888;}
.radioBox .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200;}
#pop1:checked ~ .radioBox,
#pop2:checked ~ .radioBox,
#pop3:checked ~ .radioBox,
#pop4:checked ~ .radioBox,
#pop5:checked ~ .radioBox,
#pop6:checked ~ .radioBox {left:0;}
#pop1:checked ~ .radioBox .h1, 
#pop2:checked ~ .radioBox .h2, 
#pop3:checked ~ .radioBox .h3, 
#pop4:checked ~ .radioBox .h4, 
#pop5:checked ~ .radioBox .h5, 
#pop6:checked ~ .radioBox .h6 {z-index:100;}
#pop1:checked ~ .radioBox .h1 .frame, 
#pop2:checked ~ .radioBox .h2 .frame, 
#pop3:checked ~ .radioBox .h3 .frame, 
#pop4:checked ~ .radioBox .h4 .frame, 
#pop5:checked ~ .radioBox .h5 .frame, 
#pop6:checked ~ .radioBox .h6 .frame {opacity:1; z-index:100;}
</style>
</head>
<body>
<div class="radioBoxImages">
<label for="pop1" class="rBox"><img src="//ku.shouce.ren/files/images/201601/56a3353d97db3.jpg" alt=""></label>
<label for="pop2" class="rBox"><img src="//ku.shouce.ren/files/images/201601/56a3353eba3c7.jpg" alt=""></label>
<label for="pop3" class="rBox"><img src="//ku.shouce.ren/files/images/201601/56a335400b9d0.jpg" alt=""></label>
<label for="pop4" class="rBox"><img src="//ku.shouce.ren/files/images/201601/56a3354265cab.jpg" alt=""></label>
<label for="pop5" class="rBox"><img src="//ku.shouce.ren/files/images/201601/56a33543b0c97.jpg" alt=""></label>
<label for="pop6" class="rBox"><img src="//ku.shouce.ren/files/images/201601/56a33544a8858.jpg" alt=""></label>
</div>
<input type="radio" name="pop" id="pop1" class="pop">
<input type="radio" name="pop" id="pop2" class="pop">
<input type="radio" name="pop" id="pop3" class="pop">
<input type="radio" name="pop" id="pop4" class="pop">
<input type="radio" name="pop" id="pop5" class="pop">
<input type="radio" name="pop" id="pop6" class="pop">
<input type="radio" name="pop" id="pop7" class="pop">
<div class="radioBox">
	<div class="holder h1">
		<div class="frame">
			<div class="clickLeft"><label for="pop6" class="previous">上一张</label></div><div class="clickRight"><label for="pop2" class="next">下一张</label></div>
			<img class="large" src="//ku.shouce.ren/files/images/201601/56a3353d97db3.jpg" alt="">
			<div class="caption">
				<h4>Image #1 <span>Image 1/6</span></h4>
				<p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
			</div>
			<label for="pop7" class="close"><img src="//ku.shouce.ren/files/images/201601/56a335479186e.png" alt="Close"></label>
		</div>
	</div>
	<div class="holder h2">
		<div class="frame">
			<div class="clickLeft"><label for="pop1" class="previous">上一张</label></div><div class="clickRight"><label for="pop3" class="next">下一张</label></div>
			<img class="large" src="//ku.shouce.ren/files/images/201601/56a3353eba3c7.jpg" alt="">
			<div class="caption">
				<h4>Image #2 <span>Image 2/6</span></h4>
				<p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
			</div>
			<label for="pop7" class="close"><img src="//ku.shouce.ren/files/images/201601/56a335479186e.png" alt="Close"></label>
		</div>
	</div>
	<div class="holder h3">
		<div class="frame">
			<div class="clickLeft"><label for="pop2" class="previous">上一张</label></div><div class="clickRight"><label for="pop4" class="next">下一张</label></div>
			<img class="large" src="//ku.shouce.ren/files/images/201601/56a335400b9d0.jpg" alt="">
			<div class="caption">
				<h4>Image #3 <span>Image 3/6</span></h4>
				<p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
			</div>
			<label for="pop7" class="close"><img src="//ku.shouce.ren/files/images/201601/56a335479186e.png" alt="Close"></label>
		</div>
	</div>
	<div class="holder h4">
		<div class="frame">
			<div class="clickLeft"><label for="pop3" class="previous">上一张</label></div><div class="clickRight"><label for="pop5" class="next">下一张</label></div>
			<img class="large" src="//ku.shouce.ren/files/images/201601/56a3354265cab.jpg" alt="">
			<div class="caption">
				<h4>Image #4 <span>Image 4/6</span></h4>
				<p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
			</div>
			<label for="pop7" class="close"><img src="//ku.shouce.ren/files/images/201601/56a335479186e.png" alt="Close"></label>
		</div>
	</div>
	<div class="holder h5">
		<div class="frame">
			<div class="clickLeft"><label for="pop4" class="previous">上一张</label></div><div class="clickRight"><label for="pop6" class="next">下一张</label></div>
			<img class="large" src="//ku.shouce.ren/files/images/201601/56a33543b0c97.jpg" alt="">
			<div class="caption">
				<h4>Image #5 <span>Image 5/6</span></h4>
				<p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
			</div>
			<label for="pop7" class="close"><img src="//ku.shouce.ren/files/images/201601/56a335479186e.png" alt="Close"></label>
		</div>
	</div>
	<div class="holder h6">
		<div class="frame">
			<div class="clickLeft"><label for="pop5" class="previous">上一张</label></div><div class="clickRight"><label for="pop1" class="next">下一张</label></div>
			<img class="large" src="//ku.shouce.ren/files/images/201601/56a33544a8858.jpg" alt="">
			<div class="caption">
				<h4>Image #6 <span>Image 6/6</span></h4>
				<p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
			</div>
			<label for="pop7" class="close"><img src="//ku.shouce.ren/files/images/201601/56a335479186e.png" alt="Close"></label>
		</div>
	</div>
</div>

</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3模仿的圆角Js弹出框效果，图片盒子

分类

CSS3

描述

现在有了CSS3技术，貌似很多效果实现起来都想当容易，省去了使用JS的麻烦，这是最近看到一个用css3做的弹框效果，甚是吃了一惊，所以自己就把代码考来研究了一番。不过目前，CSS3暂时不支持流行的IE8，这真的是有些遗憾，相信在不久的将...