是否可以仅通过 CSS 在页面加载时更改特定元素的背景？答案

【问题标题】：Is it possible to change the background of a particular element on page load via CSS only?是否可以仅通过 CSS 在页面加载时更改特定元素的背景？
【发布时间】：2012-01-18 21:03:34
【问题描述】：

我正在这样的页面中加载一些元素：

<ul>
    <li> Some stuff</li>
    <li> Some other stuff</li>
    <li class="unread"> Some more stuff</li>
</ul>

在页面加载时，我希望具有 .unread 类的列表项的背景从某种颜色过渡到实际页面的背景颜色（想想 facebook 上的未读通知）

某种类型的 javascript 是绝对必要的吗？或者仅使用纯 CSS 就可以做到这一点？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您可以使用 CSS3 过渡来做到这一点。请参阅this 问题的答案以了解我的意思。唯一的问题是旧浏览器不支持 CSS3，您必须为每个渲染引擎添加自定义 CSS（类似于圆角边框）。

【讨论】：

我看到了 CSS 过渡代码，但是浏览器如何知道背景将首先是哪种颜色以及它将过渡到哪种颜色？
在做了一些研究之后，我意识到这只能用于像 :hover 和 :focus 这样的伪类中，我试图让背景在页面加载时自动设置动画。

【解决方案2】：

您可以使用 jQuery 动画来转换li 的背景颜色。像下面这样的东西应该可以解决问题，

DEMO这里

$(document).ready(function () {
    $('.unread').animate({ backgroundColor: "#68BFEF" }, 2000);
});

你可以阅读它here

【讨论】：

我相信这需要jQuery颜色插件，没有插件是否可以达到这个效果？
@Xecure：不，这是普通的 jQuery UI。