css单选radio按钮样式css多选框checkbox样式css响应式汉堡菜单(左滑、抽屉)css实现遮罩层弹出效果一组好看的css按钮效果(6种)css实现select下拉选择框css实现选项卡功能css实现下拉菜单css按钮样式代码(16种)css实现手风琴效果css图片轮播效果css进度条样式css实现侧边栏菜单css加载动画css背景动画效果css开关按钮样式(18种)css炫酷的圆形菜单css提示tooltip效果css手风琴_好看的Gallery伸缩效果css表格样式css分段控件导航栏css折角效果css粒子背景动画效果css进度圆圈连线css响应式分页样式代码css各种天气样式动画图标css层叠卡片滑出特效css下拉Dropdown菜单css圆圈按钮tip提示特效css和svg圆圈进度样式代码css动画404页面代码css爱心跳动动画代码css绘制逼真玻璃球效果css模拟开关灯特效创意css网格布局带动画效果css星级打分radio五角星css卡片悬浮翻转特效div上下浮动纯css动画css时间轴样式（timeLine）css文字循环翻滚动画效果css输入框动效css鼠标悬停缩放比例效果css模糊背景毛玻璃效果css实现小球循环跳动动画css实现标签样式Tagscss进度条阴影动画css绘制的小鸟css svg按钮冒泡动画特效css svg蓝色波浪动画特效css创意svg菜单栏水滴动画css文字进度条的实现CSS实现内容折叠/展开效果CSS3手机充电特效css实现鼠标点击拖拽效果CSS实现一个计时器纯CSS渐变绘制 Chrome 图标CSS 渐变来实现波浪动画纯CSS动态显示屏幕宽高
css实现标签样式Tags
源码
<ul class="tags">
<li class="tag"><span>standard</span><span class="num">4</span></li>
<li class="tag tag-aqua"><span>aqua</span><span class="num">12</span></li>
<li class="tag tag-blue"><span>blue</span><span class="num">1</span></li>
<li class="tag tag-orange"><span>orange</span><span class="num">1</span></li>
<li class="tag tag-red"><span>red</span><span class="num">2</span></li>
<li class="tag tag-yellow"><span>yellow</span><span class="num">8</span></li>
<li class="tag tag-round"><span>standard round</span><span class="num">6</span></li>
</ul>
<style>
* {
box-sizing: border-box;
list-style-type: none;
}
html {
font-size: 62.5%;
height: 100%;
}
body {
font: normal 16px 'Open Sans', sans-serif;
padding: 4rem;
background:#b1600c
}
.tags {
list-style: none;
padding: 0;
margin: 0;
}
.tag {
color: #737373;
background: #cccccc;
box-shadow: 0 4px 0 0 #b3b3b3, 4px 4px 0 0 #b3b3b3;
display: inline-block;
font: normal normal normal 14px/12px 'Open Sans', sans-serif;
height: 30px;
margin: 0 2rem 1rem 0;
padding: 1rem 2.8rem 1rem 2rem;
position: relative;
top: 0;
content: "";
cursor: pointer;
text-align: center;
text-transform: lowercase;
border: 0 solid transparent;
transition: all 0.3s ease;
}
.tag:before {
color: rgba(255, 255, 255, 0.9);
background: #cccccc;
box-shadow: 0 4px 0 0 #b3b3b3;
display: inline-block;
width: 22px;
height: 22px;
position: absolute;
top: 4px;
right: -12px;
z-index: 1;
content: "";
cursor: pointer;
transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
transition: all 0.3s ease;
}
.tag:hover:before {
background: #d9d9d9;
}
.tag:active:before {
box-shadow: none;
}
.tag:after {
display: inline-block;
background: #FFF;
border-radius: 10px;
box-shadow: 3px 3px 0 0 #b3b3b3 inset;
width: 8px;
height: 8px;
position: absolute;
top: 12px;
right: 0;
z-index: 2;
content: "";
cursor: pointer;
transition: all 0.3s ease;
}
.tag:active:after {
box-shadow: none;
}
.tag:hover {
background: #d9d9d9;
transform: scale(1.03, 1.03);
}
.tag:active {
box-shadow: none;
top: 4px;
}
.tag span {
position: relative;
z-index: 2;
}
.tag span.num {
display: block;
color: #bfbfbf;
position: absolute;
top: 0;
left: 0;
margin: 0;
font: bold 50px/28px 'Open Sans', sans-serif;
letter-spacing: -6px;
overflow: hidden;
height: 30px;
width: 100%;
text-align: left;
z-index: 1;
}
.tag-round {
border-radius: 4px 1px 1px 4px;
}
.tag-round:before {
border-radius: 1px 1px 4px;
}
.tag-aqua {
color: #072520;
background: #28d0b3;
box-shadow: 0 4px 0 0 #20a58e, 4px 4px 0 0 #20a58e;
}
.tag-aqua:before {
background: #28d0b3;
box-shadow: 0 4px 0 0 #20a58e;
}
.tag-aqua:hover:before {
background: #39d9bd;
}
.tag-aqua:after {
box-shadow: 3px 3px 0 0 #20a58e inset;
}
.tag-aqua:hover {
background: #39d9bd;
}
.tag-aqua span.num {
color: #24bba1;
}
.tag-blue {
color: black;
background: #5945e8;
box-shadow: 0 4px 0 0 #331cde, 4px 4px 0 0 #331cde;
}
.tag-blue:before {
background: #5945e8;
box-shadow: 0 4px 0 0 #331cde;
}
.tag-blue:hover:before {
background: #6d5ceb;
}
.tag-blue:after {
box-shadow: 3px 3px 0 0 #331cde inset;
}
.tag-blue:hover {
background: #6d5ceb;
}
.tag-blue span.num {
color: #452ee5;
}
.tag-orange {
color: #221202;
background: #e17a0f;
box-shadow: 0 4px 0 0 #b1600c, 4px 4px 0 0 #b1600c;
}
.tag-orange:before {
background: #e17a0f;
box-shadow: 0 4px 0 0 #b1600c;
}
.tag-orange:hover:before {
background: #f0871a;
}
.tag-orange:after {
box-shadow: 3px 3px 0 0 #b1600c inset;
}
.tag-orange:hover {
background: #f0871a;
}
.tag-orange span.num {
color: #c96d0d;
}
.tag-red {
color: #290a0a;
background: #cc3333;
box-shadow: 0 4px 0 0 #a32929, 4px 4px 0 0 #a32929;
}
.tag-red:before {
background: #cc3333;
box-shadow: 0 4px 0 0 #a32929;
}
.tag-red:hover:before {
background: #d14747;
}
.tag-red:after {
box-shadow: 3px 3px 0 0 #a32929 inset;
}
.tag-red:hover {
background: #d14747;
}
.tag-red span.num {
color: #b82e2e;
}
.tag-yellow {
color: #312b03;
background: #eed112;
box-shadow: 0 4px 0 0 #bfa80e, 4px 4px 0 0 #bfa80e;
}
.tag-yellow:before {
background: #eed112;
box-shadow: 0 4px 0 0 #bfa80e;
}
.tag-yellow:hover:before {
background: #f0d62a;
}
.tag-yellow:after {
box-shadow: 3px 3px 0 0 #bfa80e inset;
}
.tag-yellow:hover {
background: #f0d62a;
}
.tag-yellow span.num {
color: #d7bd0f;
}
</style>