纯css实现MaterialDesign的card

最新推荐文章于 2024-07-10 17:46:06 发布

weixin_30467087

最新推荐文章于 2024-07-10 17:46:06 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/maoguy/p/7978544.html

版权

 1 <!DOCTYPE>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>MaterialDesignCard</title>
 6   <style>
 7   body {
 8     background: #e2e1e0;
 9     text-align: center;
10   }
11 
12   .card {
13     background: #fff;
14     border-radius: 10px;
15     display: inline-block;
16     height: 300px;
17     margin: 1rem;
18     position: relative;
19     width: 300px;
20   }
21 
22   .card-1 {
23     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
24     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
25   }
26 
27   .card-1:hover {
28     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
29   }
30 
31   .card-2 {
32     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
33   }
34 
35   .card-3 {
36     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
37   }
38 
39   .card-4 {
40     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
41   }
42 
43   .card-5 {
44     box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
45   }
46 
47   </style>
48 </head>
49 <body>
50   <div class="card">card</div>
51   <div class="card card-1">card1</div>
52   <div class="card card-2">card2</div>
53   <div class="card card-3">card3</div>
54   <div class="card card-4">card4</div>
55   <div class="card card-5">card5</div>
56 </body>
57 </html>