CSS3+DIV實現(xiàn)漂亮的動畫彩色標(biāo)簽
發(fā)布時間:2016-06-16 16:56:07 作者:佚名
我要評論

這篇文章主要為大家詳細(xì)介紹了CSS3+DIV實現(xiàn)漂亮的動畫彩色標(biāo)簽,鼠標(biāo)移動會有動畫 ,很神奇的動畫效果,感興趣的小伙伴們可以參考一下
先看看效果圖:
CSS Code復(fù)制內(nèi)容到剪貼板
- <style>
- .dict { margin: 20px 0;clear:both ;text-align:left;font-size:12px;}
- .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; }
- .dict a { color: #FFF;text-decoration:none }
- .dict a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }
- .dict .pcolor a:nth-child(8n-7) { background: #8A9B0F }
- .dict .pcolor a:nth-child(8n-6) { background: #EB6841 }
- .dict .pcolor a:nth-child(8n-5) { background: #3FB8AF }
- .dict .pcolor a:nth-child(8n-4) { background: #FE4365 }
- .dict .pcolor a:nth-child(8n-3) { background: #FC9D9A }
- .dict .pcolor a:nth-child(8n-2) { background: #EDC951 }
- .dict .pcolor a:nth-child(8n-1) { background: #C8C8A9 }
- .dict .pcolor a:nth-child(8n) { background: #83AF9B }
- .dict .pcolor a:first-child { background: #036564 }
- .dict .pcolor a:last-child { background: #3299BB }
- </style>
- <div class="dict">
- <p class="pcolor">
- <a href="#">html</a>
- <a href="#">css3</a>
- <a href="#">網(wǎng)站模版</a>
- <a href="#">個人博客模版</a>
- <a href="#">扁平化</a>
- <a href="#">div+css</a>
- <a href="#">bootstrap</a>
- <a href="#">企業(yè)模版</a>
- <a href="#">古典/文化</a>
- <a href="#">婚紗攝影</a>
- <a href="#">愛情</a>
- <a href="#">jquery</a>
- </p>
- </div>
原文鏈接:http://www.cnblogs.com/cssteach/archive/2016/06/16/5590375.html
相關(guān)文章
HTML5 SVG和CSS3實現(xiàn)的表單浮動標(biāo)簽特效源碼
是一段實現(xiàn)了12中非常炫酷的表單浮動標(biāo)簽特效代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有興趣的朋友們可以前來下載使用2015-04-10僅6個span標(biāo)簽實現(xiàn)的純CSS3動態(tài)Loading加載特效源碼
今天我們介紹一款實現(xiàn)超級簡單的CSS3進(jìn)度條動畫,該進(jìn)度條是條形進(jìn)度條,僅用了6個span標(biāo)簽和相應(yīng)的CSS3代碼實現(xiàn)了該CSS3條形進(jìn)度條。呈現(xiàn)出波浪滾動的效果。整體效果動感2014-10-31一款超酷的js+css3實現(xiàn)的3D標(biāo)簽云特效兼容ie7/8/9
一款超酷的js+css3實現(xiàn)的3D標(biāo)簽云特效,兼容ie7/8/9,看慣了flash的,來試試這個吧,下面有個不錯的示例,希望大家不要錯過2013-11-18jQuery+ajax+html5+css3等最新技術(shù)整合的Tab標(biāo)簽欄切換特效
一個功能非常完美的ajax tab切換效果,使用html5、css3,jquery等完成,彩色的tab標(biāo)簽2013-05-13純css3實現(xiàn)的tab標(biāo)簽(無圖片)
用CSS3代碼來寫,非常簡潔,無需圖片配合,只要純代碼即可實現(xiàn),還有更簡潔的么2013-03-27- 下面小編就為大家?guī)硪黄狢SS3的幾個標(biāo)簽速記(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-07-07