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

建立一個(gè)div，賦予兩個(gè)class屬性：cardand suitdiamonds

.代碼

往這個(gè)div中添加卡片的內(nèi)容，只需要一個(gè)包含字母A的段落標(biāo)記

就可以了。

.代碼

2. A

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

精心開(kāi)發(fā)5年的UI前端框架！

css代碼

css的第一步是規(guī)定基本的頁(yè)面屬性，這些屬性將被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 的樣式非常簡(jiǎn)單，白色背景，圓角，邊框陰影，除了position屬性為relative外沒(méi)有什么特別的。

現(xiàn)在我們給A字母潤(rùn)色一下

.代碼

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

先看看效果：

現(xiàn)在看起來(lái)是不是已經(jīng)有卡片的效果了，但是總感覺(jué)還缺少些什么-梅花、方塊、紅桃、黑桃。如果我們要顯示這些圖形但又不引入圖片的話，事情將變得復(fù)雜起來(lái)，但是我們還是有解決問(wèn)題的技巧的。精心開(kāi)發(fā)5年的UI前端框架！

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

.代碼

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

我同時(shí)用before 和 after這樣我就能得到上下兩個(gè)方塊圖形，其他圖形依葫蘆畫(huà)瓢。

.代碼

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. }

如果你是一個(gè)仔細(xì)的人，你應(yīng)該發(fā)現(xiàn)了這些方塊梅花的方向貌似搞反了。其實(shí)css實(shí)現(xiàn)反轉(zhuǎn)也很容易，但是考慮到?jīng)]人會(huì)把屏幕倒過(guò)來(lái)看這張撲克牌，所以這是不必要的。

我們畫(huà)好了撲克的符號(hào)，還應(yīng)該修飾大小和合適的定位。方塊、梅花、紅桃黑桃的字體大小位置擺放以及position屬性都是一致的，因此我們最好只寫(xiě)一次。div[class*='suit']選擇器就可以同時(shí)選擇這四個(gè)。（原文的評(píng)論里面有人建議單獨(dú)用一個(gè)class來(lái)定義，因?yàn)樽髡叩倪@個(gè)方法效率上講要低一些） 精心開(kāi)發(fā)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. }

下面看看效果

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

.代碼

4. A

8. A

12. A

16. A

css 精心開(kāi)發(fā)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. }

接下來(lái)我想利用css做出一些有趣的動(dòng)畫(huà)效果來(lái)：開(kāi)始的時(shí)候只顯示一張撲克，當(dāng)鼠標(biāo)移上去，撲克會(huì)展開(kāi)，就像你打牌的時(shí)候手里握牌的樣子。

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. }

鼠標(biāo)移上去的效果：

.代碼

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. }

再加上點(diǎn)陰影效果 精心開(kāi)發(fā)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. }

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com