如何用CSS+LI样式来实现列表每行自动变色？
大家好，相信许多站长在建站过程中很希望自己的站点能在使用<li> 标签每行自动变色，特别是后台新闻列表、会员列表、评论列表等场景下实现这一效果，而很多站长之前或许一直在用JS、table等方式来实现，那样既麻烦且代码臃肿复杂，那么有没有简单又简洁的方式来实现列表每行自动变色的方法呢？
今天我们来分析和实现这样的方法。其实方法很简单，我们可以使用CSS来实现。以下是一个简单的示例，使用CSS3的线性渐变背景来实现这个效果：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>如何用CSS+LI样式来实现列表每行自动变色？</title>
<style>
/*标签每行自动变色*/
.color-list li {background-image: linear-gradient(to right, #FFFFFF, #CDC9C9)/*第一行（奇数行）和鼠标滑过颜色，想要啥颜色就任意改*/;background-size: 200% auto;background-position: left bottom;transition: background-position 0.3s ease;}
.color-list li:nth-child(odd) {background-image: linear-gradient(to right, #F6F6F6, #CDC9C9);/*第二行（偶数行）和鼠标滑过颜色，想要啥颜色就任意改*/}
.color-list li:hover {background-position: right bottom;}
</style>
</head>
<body>
<ul class="color-list">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<!-- 更多行 -->
</ul>
</body>
</html>
需要的朋友赶紧去试试效果吧！
本网声明：海南科技网站长登载此文仅出于信息分享，并不意味着赞同其观点或证实其描述，不承担侵权行为的连带责任。文章内容仅供参考，不构成投资建议。投资者据此操作，风险自担。版权归原作者所有，如来源标注有误、不希望本网刊载或侵权，请与我们联系，本网核实后将立即撤除。来源为本网的，未经本网书面授权,任何单位或个人不得转载、摘编和发表。
责任编辑：NO296
上一篇：windows server 2016 服务器IIS10如何显示详细错误信息?
下一篇：抱歉，没有了！
