Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

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

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
用CSS3制作的荷叶窗式图片切换效果

分类： Html/Css

2014-07-15 10:31:56


点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html lang=zh-cn>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>用CSS3制作的荷叶窗式图片切换效果</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. .billboard {height:412px; width:600px; margin:0 auto; background:#369; padding:12px 10px 0 12px;
  12.     -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
  13.     -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
  14.     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
  15. }

  17. .poster {float:left;width:50px; height:400px;
  18.     -moz-perspective: 800px;
  19.     -moz-perspective-origin: 50% 200px;
  20.     -webkit-perspective: 800px;
  21.     -webkit-perspective-origin: 50% 200px;
  22. }

  24. .triangle {position:relative; margin:0 auto; height:400px; width:50px;
  25.     -moz-transform-style: preserve-3d;
  26.     -moz-animation:rotateMe 18s infinite;
  27.     -webkit-transform-style: preserve-3d;
  28.     -webkit-animation: rotateMe 18s infinite;
  29. }

  31. .face {position:absolute; height:400px; width:50px;}

  33. .triangle .panel1 {background:url("/images/1.jpg");
  34.     background-size:600px auto;
  35.     -webkit-backface-visibility: hidden;
  36.     -moz-backface-visibility: hidden;
  37.     -moz-transform: translateZ(14px);
  38.     -webkit-transform: translateZ(14px);
  39. }
  40. .triangle .panel2 {background:url("/images/2.jpg");
  41.     background-size:600px auto;
  42.     -webkit-backface-visibility: hidden;
  43.     -moz-backface-visibility: hidden;
  44.     -moz-transform: rotateY(120deg) translateZ(14px);
  45.     -webkit-transform: rotateY(120deg) translateZ(14px);
  46. }
  47. .triangle .panel3 {background:url("/images/3.jpg");
  48.     background-size:600px auto;
  49.     -webkit-backface-visibility: hidden;
  50.     -moz-backface-visibility: hidden;
  51.     -moz-transform: rotateY(-120deg) translateZ(14px);
  52.     -webkit-transform: rotateY(-120deg) translateZ(14px);
  53. }

  55. @-moz-keyframes rotateMe {
  56.     0% { -moz-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
  57.     9% { -moz-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
  58.     24% { -moz-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
  59.     42% { -moz-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
  60.     57% { -moz-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
  61.     75% { -moz-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
  62.     90% { -moz-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
  63.     100% { -moz-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
  64. }
  65. @-webkit-keyframes rotateMe {
  66.     0% { -webkit-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
  67.     9% { -webkit-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
  68.     24% { -webkit-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
  69.     42% { -webkit-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
  70.     57% { -webkit-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
  71.     75% { -webkit-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
  72.     90% { -webkit-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
  73.     100% { -webkit-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
  74. }

  76. .triangle .p1 {background-position:left top;}
  77. .triangle .p2 {background-position:-50px top;}
  78. .triangle .p3 {background-position:-100px top;}
  79. .triangle .p4 {background-position:-150px top;}
  80. .triangle .p5 {background-position:-200px top;}
  81. .triangle .p6 {background-position:-250px top;}
  82. .triangle .p7 {background-position:-300px top;}
  83. .triangle .p8 {background-position:-350px top;}
  84. .triangle .p9 {background-position:-400px top;}
  85. .triangle .p10 {background-position:-450px top;}
  86. .triangle .p11 {background-position:-500px top;}
  87. .triangle .p12 {background-position:-550px top;}

  89. </style>
  90. </head>
  91. <body>

  93. <div class="billboard">
  94.     <div class="poster">
  95.         <div class="triangle">
  96.             <div class="face panel1 p1">
  97.             </div>
  98.             <div class="face panel2 p1">
  99.             </div>
  100.             <div class="face panel3 p1">
  101.             </div>
  102.         </div>
  103.     </div>
  104.     <div class="poster">
  105.         <div class="triangle">
  106.             <div class="face panel1 p2">
  107.             </div>
  108.             <div class="face panel2 p2">
  109.             </div>
  110.             <div class="face panel3 p2">
  111.             </div>
  112.         </div>
  113.     </div>
  114.     <div class="poster">
  115.         <div class="triangle">
  116.             <div class="face panel1 p3">
  117.             </div>
  118.             <div class="face panel2 p3">
  119.             </div>
  120.             <div class="face panel3 p3">
  121.             </div>
  122.         </div>
  123.     </div>
  124.     <div class="poster">
  125.         <div class="triangle">
  126.             <div class="face panel1 p4">
  127.             </div>
  128.             <div class="face panel2 p4">
  129.             </div>
  130.             <div class="face panel3 p4">
  131.             </div>
  132.         </div>
  133.     </div>
  134.     <div class="poster">
  135.         <div class="triangle">
  136.             <div class="face panel1 p5">
  137.             </div>
  138.             <div class="face panel2 p5">
  139.             </div>
  140.             <div class="face panel3 p5">
  141.             </div>
  142.         </div>
  143.     </div>
  144.     <div class="poster">
  145.         <div class="triangle">
  146.             <div class="face panel1 p6">
  147.             </div>
  148.             <div class="face panel2 p6">
  149.             </div>
  150.             <div class="face panel3 p6">
  151.             </div>
  152.         </div>
  153.     </div>
  154.     <div class="poster">
  155.         <div class="triangle">
  156.             <div class="face panel1 p7">
  157.             </div>
  158.             <div class="face panel2 p7">
  159.             </div>
  160.             <div class="face panel3 p7">
  161.             </div>
  162.         </div>
  163.     </div>
  164.     <div class="poster">
  165.         <div class="triangle">
  166.             <div class="face panel1 p8">
  167.             </div>
  168.             <div class="face panel2 p8">
  169.             </div>
  170.             <div class="face panel3 p8">
  171.             </div>
  172.         </div>
  173.     </div>
  174.     <div class="poster">
  175.         <div class="triangle">
  176.             <div class="face panel1 p9">
  177.             </div>
  178.             <div class="face panel2 p9">
  179.             </div>
  180.             <div class="face panel3 p9">
  181.             </div>
  182.         </div>
  183.     </div>
  184.     <div class="poster">
  185.         <div class="triangle">
  186.             <div class="face panel1 p10">
  187.             </div>
  188.             <div class="face panel2 p10">
  189.             </div>
  190.             <div class="face panel3 p10">
  191.             </div>
  192.         </div>
  193.     </div>
  194.     <div class="poster">
  195.         <div class="triangle">
  196.             <div class="face panel1 p11">
  197.             </div>
  198.             <div class="face panel2 p11">
  199.             </div>
  200.             <div class="face panel3 p11">
  201.             </div>
  202.         </div>
  203.     </div>
  204.     <div class="poster">
  205.         <div class="triangle">
  206.             <div class="face panel1 p12">
  207.             </div>
  208.             <div class="face panel2 p12">
  209.             </div>
  210.             <div class="face panel3 p12">
  211.             </div>
  212.         </div>
  213.     </div>
  214. </div>
  215. </body>
  216. </html>

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

上一篇：CSS3制作的仿JS圆角弹出框图片放大展示效果

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

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

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

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

16024965号-6