小div布局之卡片堆疊（card-stacking）

2016/11/21 8:34:39 閱讀：2581 發布者：2581

前端的頁面布局和各種效果真是讓人眼花繚亂，公司的設計師恨不得在一個網站上把前端的布局和樣式效果都用一遍。

如何實現下面這種布局效果？我給這種布局效果起了個名字，叫做小div布局之卡片堆疊。然后我百度了下，
還真有這種堆疊效果的實現，比如這個比如這個：jQuery和CSS3炫酷堆疊卡片展開和收縮特效。
google下card stacking，發現了個這個Effects for Card Stacks。當然，
上面兩個網址上的效果都比較復雜，我這里的需求簡單，只要實現下面的效果就好。

話不多說，上代碼：

 1 <style> 
 2   .container { 
 3     margin: 50px auto; 
 4     width: 328px; 
 5   } 
 6    
 7   .box { 
 8     background: #f7f7f7; 
 9     position: relative; 
10   } 
11    
12   .box-content { 
13     padding: 20px; 
14     width: 70%; 
15   } 
16    
17   .box-content-title { 
18     margin: 0 0 10px; 
19   } 
20    
21   .box-content-desc { 
22     -webkit-box-orient: vertical; 
23     color: #333; 
24     display: -webkit-box; 
25     font-size: 14px; 
26     line-height: 1.5; 
27     -webkit-line-clamp: 4; 
28     margin-bottom: 30px; 
29     overflow: hidden; 
30     text-overflow: ellipsis; 
31   } 
32    
33   .box-content-link { 
34     color: #006ec8; 
35     font-size: 14px; 
36     text-decoration: none; 
37   } 
38    
39   .box-content-link:hover { 
40     text-decoration: none; 
41   } 
42    
43   .box-img { 
44     position: absolute; 
45     right: -38%; 
46     top: 20px; 
47   } 
48 </style> 
49 <div class="container"> 
50   <div class="box"> 
51     <div class="box-content"> 
52       <h5 class="box-content-title">A公司</h5> 
53       <div class="box-content-desc">A公司是B公司的重要戰略伙伴，致力于為C行業提供一站式 
解決方案，目前處于高速發展期。公司旗下有四個事業部，
業務主要涵蓋以下三個方面，2016年公司 年營業額達到100萬元。 
54       </div> 
55       <a class="box-content-link" href="javascript:void(0);">查看 >></a> 
56     </div> 
57     <img class="box-img" src="../../asset/images/logo/obama-card196x172.jpg" alt=""> 
58   </div> 
59 </div>