CSS3+DIV实现漂亮的动画彩色标签

先看看效果图：

1.   
2.   
3. .dict { margin: 20px 0;clear:both ;text-align:left;font-size:12px;}   
4.   
5. .dict a { line-height: 24px; height: 24px; display: inline-block; background: #fff; padding: 3px 11px; margin: 10px 5px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }   
6.   
7. .dict a { color: #FFF;text-decoration:none }   
8.   
9. .dict a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }   
10.   
11. .dict .pcolor a:nth-child(8n-7) { background: #8A9B0F }   
12.   
13. .dict .pcolor a:nth-child(8n-6) { background: #EB6841 }   
14.   
15. .dict .pcolor a:nth-child(8n-5) { background: #3FB8AF }   
16.   
17. .dict .pcolor a:nth-child(8n-4) { background: #FE4365 }   
18.   
19. .dict .pcolor a:nth-child(8n-3) { background: #FC9D9A }   
20.   
21. .dict .pcolor a:nth-child(8n-2) { background: #EDC951 }   
22.   
23. .dict .pcolor a:nth-child(8n-1) { background: #C8C8A9 }   
24.   
25. .dict .pcolor a:nth-child(8n) { background: #83AF9B }   
26.   
27. .dict .pcolor a:first-child { background: #036564 }   
28.   
29. .dict .pcolor a:last-child { background: #3299BB }   
30.   
31.   
32.   
33. "dict">   
34.   
35.        
36.   
37.         "#">html   
38.   
39.         "#">css3   
40.   
41.         "#">网站模版   
42.   
43.         "#">个人博客模版   
44.   
45.         "#">扁平化   
46.   
47.         "#">div+css   
48.   
49.         "#">bootstrap   
50.   
51.         "#">企业模版   
52.   
53.         "#">古典/文化   
54.   
55.         "#">婚纱摄影   
56.   
57.         "#">爱情   
58.   
59.         "#">jquery   
60.   
61.     
      
62.   
63.   

原文链接：http://www.cnblogs.com/cssteach/archive/2016/06/16/5590375.html