CSS3实现简易版的刮刮乐效果

效果图

代码

1.   
2.   
3.   
4.   
5.       
6.       
7.       
8.     .card {   
9.         border: 1px solid #000;   
10.         -webkit-box-shadow: 1px 1px 2px rgba(77, 73, 73, 1.0), -1px -1px 2px rgba(77, 73, 73, 1.0), 0 0 1px rgba(77, 73, 73, 1.0) inset;   
11.                 box-shadow: 1px 1px 2px rgba(77, 73, 73, 1.0), -1px -1px 2px rgba(77, 73, 73, 1.0), 0 0 1px rgba(77, 73, 73, 1.0) inset;   
12.         border-radius: 3%;   
13.         width: 20rem;   
14.         height: 30rem;   
15.         background: -webkit-gradient(linear, left top, left bottom, from(#EEE5E5), to(#FCE4E4));   
16.         background: -webkit-linear-gradient(top, #EEE5E5, #FCE4E4);   
17.         background: linear-gradient(180deg, #EEE5E5, #FCE4E4);   
18.     }   
19.   
20.     .title,   
21.     .ad-desrc {   
22.         margin: 0;   
23.         text-align: center;   
24.         padding: 30px 0;   
25.     }   
26.     .ad-desrc{   
27.         color: #bbb;   
28.         font-size: 12px;   
29.     }   
30.   
31.     .card-head,   
32.     .card-footer {   
33.         height: 25%;   
34.         width: 100%;   
35.     }   
36.   
37.     .card-body {   
38.         height: 50%;   
39.         width: 100%;   
40.     }   
41.   
42.     .award-desrc {   
43.         padding: 0 30px;   
44.         margin: 5px auto;   
45.         text-align: left;   
46.     }   
47.   
48.     .award-scan {   
49.         text-align: center;   
50.         font-size: 20px;   
51.         font-weight: 700;   
52.         width: 80%;   
53.         margin: 15px auto;   
54.         padding: 30px 10px;   
55.            
56.         color: transparent;   
57.         -webkit-box-shadow: 0 0 5px rgba(178, 178, 178, 1);   
58.                 box-shadow: 0 0 5px rgba(178, 178, 178, 1);   
59.     }   
60.       
61.   
62.   
63.   
64.     

    非常简易版的刮刮乐模拟，搭配JS更加【禁用和启用选中功能】

      
65.       
66.           
67.             CRPER刮刮乐  
68.