首页 > 开发 > CSS > 正文

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

2024-07-11 08:25:42

字体：大中小

来源：转载

供稿：网友

先看看效果图：

CSS Code复制内容到剪贴板

<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="#">网站模版</a>
<a href="#">个人博客模版</a>
<a href="#">扁平化</a>
<a href="#">div+css</a>
<a href="#">bootstrap</a>
<a href="#">企业模版</a>
<a href="#">古典/文化</a>
<a href="#">婚纱摄影</a>
<a href="#">爱情</a>
<a href="#">jquery</a>
</p>
</div>

上一篇：CSS控制DIV层显示和隐藏的实现方法

下一篇：CSS3中Transform动画属性用法详解

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注