首页

JS特效

CSS3特效

CSS3选择滑块按钮代码

立即下载预览

<头>
<元字符集=“UTF-8”>
jQuery+CSS3选择按钮代码

<风格>
.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；
背景：白色；
}
</风格>

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

120h

144h

168h

192h

216h

240h

288h

312h

336h

;

<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中文网。

免责声明

本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性！本站所有资源仅供学习参考。请不要将它们用于商业目的。否则，一切后果由您负责！如有侵权，请联系我们删除。联系方式：admin@php.cn

如何熟练运用CSS3特效提升网页的用户体验

09 Sep 2023

如何熟练运用CSS3特效提升网页的用户体验随着互联网的发展，网页设计和用户体验成为了网站开发中的重要环节。而CSS3特效的应用，可以为网页增添动感和视觉效果，提升用户体验。本文将介绍几种常见的CSS3特效及其代码示例，帮助开发者更加熟练地运用CSS3特效，提升网页的用户体验。过渡效果（Transition）过渡效果是CSS3中最基本的特效之一，通过改变某个属