最新CSS3模仿的圆角Js弹出框效果,图片盒子
以下是三零网为大家整理的最新CSS3模仿的圆角Js弹出框效果,图片盒子的文章,希望大家能够喜欢!
现在有了CSS3技术,貌似很多效果实现起来都想当容易,省去了使用JS的麻烦,这是最近看到一个用css3做的弹框效果,甚是吃了一惊,所以自己就把代码考来研究了一番。不过目前,CSS3暂时不支持流行的IE8,这真的是有些遗憾,相信在不久的将来,支持CSS3技术的浏览器会越来越多。本例中的图片张数你可以自己定,目前暂时安排这么多,点击图片就会看到弹出的圆角框,还可以关闭哦。
<!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="/jscss/demoimg/wall1.jpg" alt=""></label> <label for="pop2" class="rBox"><img src="/jscss/demoimg/wall2.jpg" alt=""></label> <label for="pop3" class="rBox"><img src="/jscss/demoimg/wall3.jpg" alt=""></label> <label for="pop4" class="rBox"><img src="/jscss/demoimg/wall4.jpg" alt=""></label> <label for="pop5" class="rBox"><img src="/jscss/demoimg/wall5.jpg" alt=""></label> <label for="pop6" class="rBox"><img src="/jscss/demoimg/wall6.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="/jscss/demoimg/wall1.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="/jscss/demoimg/201207/close.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="/jscss/demoimg/wall2.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="/jscss/demoimg/201207/close.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="/jscss/demoimg/wall3.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="/jscss/demoimg/201207/close.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="/jscss/demoimg/wall4.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="/jscss/demoimg/201207/close.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="/jscss/demoimg/wall5.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="/jscss/demoimg/201207/close.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="/jscss/demoimg/wall6.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="/jscss/demoimg/201207/close.png" alt="Close"></label> </div> </div> </div> </body> </html> |
延伸阅读:
·【导航菜单特效】几个Tab,滑动门,选项卡,图片切换
·【导航菜单特效】黑色个性的CSS3导航菜单
·【导航菜单特效】蓝色圆角水平导航菜单
·【导航菜单特效】CSS3 多功能下拉菜单
·【导航菜单特效】CSS3实现漂亮Menu菜单代码
·【导航菜单特效】CSS3 技术实现的菜单
·【导航菜单特效】CSS3按钮式导航菜单,横向,竖向
·【导航菜单特效】银灰色动画效果的CSS3导航菜单
·【导航菜单特效】纯CSS3精仿Win7风格的开始菜单
·【导航菜单特效】多级css3渐变效果下拉菜单导航【荐】
·【导航菜单特效】css3与jS实现彩色圆角选项卡
·【导航菜单特效】清爽的CSS3立体导航菜单
·【导航菜单特效】CSS3菜单:仿花瓣网固定顶部位置悬浮的导航菜单
·【导航菜单特效】css3的属性transition制作菜单导航
·【导航菜单特效】CSS3可关闭的下拉手风琴菜单
联系客服