CSSCard:純css制作撲克牌_html/css

第一步是制作撲克的html，我的原則是用最少最簡潔的代碼，不引用任何圖片，也許你認為不可能，但是你還是乖乖的看我是如何工作的吧。

建立一個div，賦予兩個class屬性：cardand suitdiamonds

.代碼

往這個div中添加卡片的內容，只需要一個包含字母A的段落標記

就可以了。

.代碼

2. A

現在你頭腦里要時刻記住，我們的目的不僅僅是要制作一張撲克牌，而且要用最簡潔的代碼，html部分的代碼就只需要這么多了（夠簡潔吧）。

精心開發5年的UI前端框架！

css代碼

css的第一步是規定基本的頁面屬性，這些屬性將被card繼承。

.代碼

1. * {margin: 0; padding: 0;}
3. body {
4. background: #00a651;
5. }
7. .card {
8. position: relative;
9. float: left;
10. margin-right: 10px;
11. width: 150px;
12. height: 220px;
13. border-radius: 10px;
14. background: #fff;
15. -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
16. box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
17. }

就如上面的代碼所示，card 的樣式非常簡單，白色背景，圓角，邊框陰影，除了position屬性為relative外沒有什么特別的。

現在我們給A字母潤色一下

.代碼

1. .card p {
2. text-align: center;
3. font: 100px/220px Georgia, Times New Roman, serif;
4. }

先看看效果：

現在看起來是不是已經有卡片的效果了，但是總感覺還缺少些什么-梅花、方塊、紅桃、黑桃。如果我們要顯示這些圖形但又不引入圖片的話，事情將變得復雜起來，但是我們還是有解決問題的技巧的。精心開發5年的UI前端框架！

考慮到我們不再想要給html部分添加更多的代碼，我們引入偽元素before和after來給卡片添加梅花方塊這些圖形。幸運的是，絕大多數的瀏覽器都能識別各種種類的特殊符號。

.代碼

1. .suitdiamonds:before, .suitdiamonds:after {
2. content: "?";
3. color: #ff0000;
4. }

我同時用before 和 after這樣我就能得到上下兩個方塊圖形，其他圖形依葫蘆畫瓢。

.代碼

1. .suitdiamonds:before, .suitdiamonds:after {
2. content: "?";
3. color: #ff0000;
4. }
6. .suithearts:before, .suithearts:after {
7. content: "?";
8. color: #ff0000;
9. }
11. .suitclubs:before, .suitclubs:after {
12. content: "?";
13. color: #000;
14. }
16. .suitspades:before, .suitspades:after {
17. content: "?";
18. color: #000;
19. }

如果你是一個仔細的人，你應該發現了這些方塊梅花的方向貌似搞反了。其實css實現反轉也很容易，但是考慮到沒人會把屏幕倒過來看這張撲克牌，所以這是不必要的。

我們畫好了撲克的符號，還應該修飾大小和合適的定位。方塊、梅花、紅桃黑桃的字體大小位置擺放以及position屬性都是一致的，因此我們最好只寫一次。div[class*='suit']選擇器就可以同時選擇這四個。（原文的評論里面有人建議單獨用一個class來定義，因為作者的這個方法效率上講要低一些） 精心開發5年的UI前端框架！

.代碼

1. div[class*='suit']:before {
2. position: absolute;
3. font-size: 35px;
4. left: 5px;
5. top: 5px;
6. }
8. div[class*='suit']:after {
9. position: absolute;
10. font-size: 35px;
11. right: 5px;
12. bottom: 5px;
13. }

下面看看效果

上面我們只是制作了一張圖片，現在我想制作一組圖片的效果：

.代碼

4. A

8. A

12. A

16. A

css 精心開發5年的UI前端框架！

.代碼

1. .hand {
2. margin: 50px;
3. }
5. /* For modern browsers */
6. .hand:before,
7. .hand:after {
8. content:"";
9. display:table;
10. }
12. .hand:after {
13. clear:both;
14. }
16. /* For IE 6/7 (trigger hasLayout) */
17. .hand {
18. zoom:1;
19. }
21. .card:hover {
22. cursor: pointer;
23. }

接下來我想利用css做出一些有趣的動畫效果來：開始的時候只顯示一張撲克，當鼠標移上去，撲克會展開，就像你打牌的時候手里握牌的樣子。

html

和之前不同的是我增加了spread class屬性

.代碼

4. A

8. A

12. A

16. A

css

.代碼

1. .spread {
2. width: 350px;
3. height: 250px;
4. position: relative;
5. }
7. .spread > .card {
8. position: absolute;
9. top: 0;
10. left: 0;
11. -webkit-transition: top 0.3s ease, left 0.3s ease;
12. -moz-transition: top 0.3s ease, left 0.3s ease;
13. -o-transition: top 0.3s ease, left 0.3s ease;
14. -ms-transition: top 0.3s ease, left 0.3s ease;
15. transition: top 0.3s ease, left 0.3s ease;
16. }

鼠標移上去的效果：

.代碼

1. .spread:hover .suitdiamonds {
2. -webkit-transform: rotate(-10deg);
3. -moz-transform: rotate(-10deg);
4. -o-transform: rotate(-10deg);
5. -ms-transform: rotate(-10deg);
6. transform: rotate(-10deg);
7. }
9. .spread:hover .suithearts {
10. left: 30px;
11. top: 0px;
12. -webkit-transform: rotate(0deg);
13. -moz-transform: rotate(0deg);
14. -o-transform: rotate(0deg);
15. -ms-transform: rotate(0deg);
16. transform: rotate(0deg);
17. }
19. .spread:hover .suitclubs {
20. left: 60px;
21. top: 5px;
22. -webkit-transform: rotate(10deg);
23. -moz-transform: rotate(10deg);
24. -o-transform: rotate(10deg);
25. -ms-transform: rotate(10deg);
26. transform: rotate(10deg);
27. }
29. .spread:hover .suitspades{
30. left: 80px;
31. top: 10px;
32. -webkit-transform: rotate(20deg);
33. -moz-transform: rotate(20deg);
34. -o-transform: rotate(20deg);
35. -ms-transform: rotate(20deg);
36. transform: rotate(20deg);
37. }

再加上點陰影效果 精心開發5年的UI前端框架！

.代碼

1. .spread > .card:hover {
2. -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.4);
3. box-shadow: 1px 1px 7px rgba(0,0,0,0.4);
4. }

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com