Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76310
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
CSS3制作的仿JS圆角弹出框图片放大展示效果

分类： Html/Css

2014-07-14 15:49:17


点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html lang=zh-cn>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>CSS3制作的仿JS圆角弹出框图片放大展示效果丨芯晴网页特效丨CsrCode.CN</title>
  6. <style>
  7. *{margin:0px;padding:0px;}
  8. body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
  9. .tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
  10. .bredcolor{color:#fff;}
  11. .radioBoxImages {padding:50px 0 0 35px;}
  12. .rBox img {border:0;height:100px;}
  13. input.pop {position:absolute; left:-9999px;}
  14. .radioBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);}
  15. .radioBox .holder {position:absolute; width:100%; height:100%; left:0; top:0; z-index:50; text-align:center; display:table-cell;}
  16. .radioBox .frame {display:inline-block; margin:50px auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
  17. border-radius:5px 5px 0 0;
  18. opacity:0;
  19. -webkit-transition: 0.75s;
  20. -moz-transition: 0.75s;
  21. -o-transition: 0.75s;
  22. transition: 0.75s;
  23. }
  24. .radioBox .frame .clickLeft {position:absolute; left:15px; top:15px; right:50%; bottom:15px; z-index:110;}
  25. .radioBox .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; height:40px; top:120px; left:0;
  26. -webkit-transition: 0.5s;
  27. -moz-transition: 0.5s;
  28. -o-transition: 0.5s;
  29. transition: 0.5s;
  30. }
  31. .radioBox .frame .clickLeft:hover .previous {opacity:1;background-color:rgba(0,0,0,.5);color:#fff;}
  32. .radioBox .frame .clickRight {position:absolute; right:15px; top:15px; left:50%; bottom:15px; z-index:110;}
  33. .radioBox .frame .clickRight .next {opacity:0; position:absolute; width:100px; height:40px; top:120px; right:0;
  34. -webkit-transition: 0.5s;
  35. -moz-transition: 0.5s;
  36. -o-transition: 0.5s;
  37. transition: 0.5s;
  38. }
  39. .radioBox .frame .clickRight:hover .next {opacity:1;background-color:rgba(0,0,0,.5);color:#fff;}
  40. .radioBox .frame .caption {position:absolute; margin-top:10px; left:0; right:0; padding:5px 15px; background:#fff;
  41. box-shadow:0 15px 10px -15px rgba(0,0,0,0.8);
  42. border-radius: 0 0 5px 5px;
  43. }
  44. .radioBox .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;}
  45. .radioBox .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;}
  46. .radioBox .frame .caption h4 span {float:right; font-size:9px;}
  47. .radioBox .large {display:inline-block; position:relative; z-index:100; border:1px solid #888;}
  48. .radioBox .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200;}
  49. #pop1:checked ~ .radioBox,
  50. #pop2:checked ~ .radioBox,
  51. #pop3:checked ~ .radioBox,
  52. #pop4:checked ~ .radioBox,
  53. #pop5:checked ~ .radioBox,
  54. #pop6:checked ~ .radioBox {left:0;}
  55. #pop1:checked ~ .radioBox .h1,
  56. #pop2:checked ~ .radioBox .h2,
  57. #pop3:checked ~ .radioBox .h3,
  58. #pop4:checked ~ .radioBox .h4,
  59. #pop5:checked ~ .radioBox .h5,
  60. #pop6:checked ~ .radioBox .h6 {z-index:100;}
  61. #pop1:checked ~ .radioBox .h1 .frame,
  62. #pop2:checked ~ .radioBox .h2 .frame,
  63. #pop3:checked ~ .radioBox .h3 .frame,
  64. #pop4:checked ~ .radioBox .h4 .frame,
  65. #pop5:checked ~ .radioBox .h5 .frame,
  66. #pop6:checked ~ .radioBox .h6 .frame {opacity:1; z-index:100;}
  67. </style>
  68. </head>
  69. <body>
  70. <div class="radioBoxImages">
  71. <label for="pop1" class="rBox"><img src="/images/m01.jpg" alt=""></label>
  72. <label for="pop2" class="rBox"><img src="/images/m02.jpg" alt=""></label>
  73. <label for="pop3" class="rBox"><img src="/images/m03.jpg" alt=""></label>
  74. <label for="pop4" class="rBox"><img src="/images/m04.jpg" alt=""></label>
  75. <label for="pop5" class="rBox"><img src="/images/m05.jpg" alt=""></label>
  76. <label for="pop6" class="rBox"><img src="/images/m06.jpg" alt=""></label>
  77. </div>
  78. <input type="radio" name="pop" id="pop1" class="pop">
  79. <input type="radio" name="pop" id="pop2" class="pop">
  80. <input type="radio" name="pop" id="pop3" class="pop">
  81. <input type="radio" name="pop" id="pop4" class="pop">
  82. <input type="radio" name="pop" id="pop5" class="pop">
  83. <input type="radio" name="pop" id="pop6" class="pop">
  84. <input type="radio" name="pop" id="pop7" class="pop">
  85. <div class="radioBox">
  86.     <div class="holder h1">
  87.         <div class="frame">
  88.             <div class="clickLeft"><label for="pop6" class="previous">上一张</label></div><div class="clickRight"><label for="pop2" class="next">下一张</label></div>
  89.             <img class="large" src="/images/m01.jpg" alt="">
  90.             <div class="caption">
  91.                 <h4>Image #1 <span>Image 1/6</span></h4>
  92.                 <p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
  93.             </div>
  94.             <label for="pop7" class="close"><img src="/images/close.png" alt="Close"></label>
  95.         </div>
  96.     </div>
  97.     <div class="holder h2">
  98.         <div class="frame">
  99.             <div class="clickLeft"><label for="pop1" class="previous">上一张</label></div><div class="clickRight"><label for="pop3" class="next">下一张</label></div>
  100.             <img class="large" src="/images/m02.jpg" alt="">
  101.             <div class="caption">
  102.                 <h4>Image #2 <span>Image 2/6</span></h4>
  103.                 <p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
  104.             </div>
  105.             <label for="pop7" class="close"><img src="/images/close.png" alt="Close"></label>
  106.         </div>
  107.     </div>
  108.     <div class="holder h3">
  109.         <div class="frame">
  110.             <div class="clickLeft"><label for="pop2" class="previous">上一张</label></div><div class="clickRight"><label for="pop4" class="next">下一张</label></div>
  111.             <img class="large" src="/images/m03.jpg" alt="">
  112.             <div class="caption">
  113.                 <h4>Image #3 <span>Image 3/6</span></h4>
  114.                 <p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
  115.             </div>
  116.             <label for="pop7" class="close"><img src="/images/close.png" alt="Close"></label>
  117.         </div>
  118.     </div>
  119.     <div class="holder h4">
  120.         <div class="frame">
  121.             <div class="clickLeft"><label for="pop3" class="previous">上一张</label></div><div class="clickRight"><label for="pop5" class="next">下一张</label></div>
  122.             <img class="large" src="/images/m04.jpg" alt="">
  123.             <div class="caption">
  124.                 <h4>Image #4 <span>Image 4/6</span></h4>
  125.                 <p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
  126.             </div>
  127.             <label for="pop7" class="close"><img src="/images/close.png" alt="Close"></label>
  128.         </div>
  129.     </div>
  130.     <div class="holder h5">
  131.         <div class="frame">
  132.             <div class="clickLeft"><label for="pop4" class="previous">上一张</label></div><div class="clickRight"><label for="pop6" class="next">下一张</label></div>
  133.             <img class="large" src="/images/m05.jpg" alt="">
  134.             <div class="caption">
  135.                 <h4>Image #5 <span>Image 5/6</span></h4>
  136.                 <p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
  137.             </div>
  138.             <label for="pop7" class="close"><img src="/images/close.png" alt="Close"></label>
  139.         </div>
  140.     </div>
  141.     <div class="holder h6">
  142.         <div class="frame">
  143.             <div class="clickLeft"><label for="pop5" class="previous">上一张</label></div><div class="clickRight"><label for="pop1" class="next">下一张</label></div>
  144.             <img class="large" src="/images/m06.jpg" alt="">
  145.             <div class="caption">
  146.                 <h4>Image #6 <span>Image 6/6</span></h4>
  147.                 <p>手指移到图片上会有上一张下一张按钮 <a href="#">links</a></p>
  148.             </div>
  149.             <label for="pop7" class="close"><img src="/images/close.png" alt="Close"></label>
  150.         </div>
  151.     </div>
  152. </div>
  153. </body>
  154. </html>

阅读(423) | 评论(0) | 转发(0) |
0

上一篇：给文本添加双行删除线

下一篇：用CSS3制作的荷叶窗式图片切换效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6