首页>>焦点图>>多重图片叠加效果 带视觉差效果的轮播图(2019-05-07)

多重图片叠加效果 带视觉差效果的轮播图

多重图片叠加效果 带视觉差效果的轮播图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="images">  
  2.   <div class="lighten">  
  3.     <img src="img/lighten1.jpg" alt="" />  
  4.     <img src="img/lighten2.jpg" alt="" />  
  5.     <img src="img/lighten3.jpg" alt="" />  
  6.   </div>  
  7.   <div class="normal">  
  8.     <img src="img/1.png" alt="" />  
  9.     <img src="img/2.png" alt="" />  
  10.     <img src="img/3.png" alt="" />  
  11.   </div>  
  12.   <nav>  
  13.     <ul>  
  14.       <li class="pre"></li>  
  15.       <li class="next"></li>  
  16.     </ul>  
  17.   </nav>  
  18. </div>  

 

CSS Code
  1. *{  
  2.   margin: 0;  
  3.   padding: 0;  
  4. }  
  5.   
  6. body{  
  7.   background: #222;  
  8. }  
  9.   
  10. #loading{  
  11.   color: #fff;  
  12.   position: absolute;  
  13.   letter-spacing: 3px;  
  14.   width: 10em;  
  15.   line-height: 2em;  
  16.   top: calc(50% - 1em) ;  
  17.   left: calc(50% - 5em);  
  18.   z-index: 2;  
  19.   text-align: center;  
  20. }  
  21.   
  22. .loading-done{  
  23.   display: none;  
  24. }  
  25.   
  26. #images{  
  27.   position: absolute;  
  28.   width: 600px;  
  29.   left: calc(50% - 300px);  
  30. }  
  31.   
  32. .canvas{  
  33.   position: relative;  
  34.   display:block;  
  35.   overflow: hidden;  
  36. }  
  37.   
  38.   
  39. #images img{  
  40.   display: none;  
  41.   vertical-align: bottombottom;  
  42. }  
  43.   
  44. canvas{  
  45.   vertical-align: bottombottom;  
  46.   position: absolute;  
  47. }  
  48.   
  49. nav ul{  
  50.   height: 0;  
  51.   margin: 0;  
  52. }  
  53.   
  54.   
  55. nav li {  
  56.   position: absolute;  
  57.   width: 25px;  
  58.   height: 25px;  
  59.   opacity: .3;  
  60.   list-style: none;  
  61.   top: calc(50% - 12px);  
  62.   z-index: 100;  
  63.   transition: opacity .3s;  
  64. }  
  65.   
  66. nav li:hover{  
  67.   opacity: .7;  
  68. }  
  69.   
  70. .pre.after-loading{  
  71.   left: -40px;  
  72.   -webkit-transform: rotate(-45deg);  
  73.   transform: rotate(-45deg);  
  74.   border-top: 2px solid #000;  
  75.   border-left: 2px solid #000;  
  76. }  
  77.   
  78. .next.after-loading{  
  79.   -webkit-transform: rotate(45deg);  
  80.   transform: rotate(45deg);  
  81.   border-top: 2px solid #000;  
  82.   border-right: 2px solid #000;  
  83.   rightright: -40px;  
  84. }  

 


原文地址:http://www.freejs.net/article_jiaodiantu_765.html