CSS3选择滑块按钮代码

<头>
<元字符集=“UTF-8”>


<风格>
.tab-菜单{
顶部边距：20px；
高度：26px；
溢出：隐藏；
位置：相对；
边框半径：20px;
}
ul{
# 填充：0;
边距：0；
列表样式：无；
}
李{
高度：24px；
行高：24px;
向左飘浮;＃＃＃ 文本对齐：居中；
位置：相对；
字体大小：12px;
}
.tab-菜单跨度{
边距：4px；
显示：内联块；
高度：18px；
位置：绝对；
左：0；
顶部：0;
边框半径：20px;
过渡：左.4s；
-webkit-transition: 左 .4s;
-moz-transition：左.4s;
}
李：悬停{
光标：指针；
}
.tworow{
宽度：160px；
背景颜色: rgba(224, 229, 232, 1);
}
.tworow跨度{
宽度：72px；
背景颜色: rgba(0, 54, 80, 1);
}
.tworow .active{
白颜色;＃＃＃ }
.tworow李{
宽度：80px；
颜色:rgba(0, 54, 80, 1);
}
.八行李{
宽度：50px；
白颜色;＃＃＃ }
.eightrow .active{
颜色：#10aefc；
}
.八行{
宽度：700px；
背景：#10aefc；
}
.八行跨度{
宽度：42px；
背景：白色；
}
</风格>

</头>
<正文>
<中心>

;

<div class="tab-menu tworow">
    <span id="thirdbg"></span>
    <ul id="hourlist">
        <li class="active" type="1">24h</li>
        <li type="2">48h</li>
    </ul>
</div>
</center>
<script src="script/jquery.min.js"></script>
<script src="script/slide.js"></script>
<script>
new Slideicon($("#list"),{
index:0,
cover:$("#bg"),
callback:function (data) {
console.log(data)
}
});
new Slideicon($("#hourlist"),{
index:0,
cover:$("#thirdbg"),
callback:function (data) {
console.log(data)
}
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

这是一个CSS3选择滑块按钮代码，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。