单击“url#header4”链接时如何获得“背景颜色”效果答案

【问题标题】：How to get a `background-color` effect when clicking on a `url#header4` link单击“url#header4”链接时如何获得“背景颜色”效果
【发布时间】：2013-09-25 12:20:16
【问题描述】：

点击url#header4链接时如何获得background-color效果

例如在 stackoverflow 上。如果您选择此项：

How to shutdown my system via a php site using LAMP server?

那是一个带有id 的链接，当你点击它时，你会转到那个链接，到那个标题，并获得带有淡化效果的精美背景效果。

如何在我的网站上获得这种效果？

【问题讨论】：

api.jquery.com/category/effects
stackoverflow.com/questions/12868830/get-css-id-from-url
我宁愿不使用 jquery 或 javascript。仅使用 css3/html5 就可以实现这一点。我会等到有答案的。如果没有，那么我会检查 jquery/javascript 选项。

标签： html css

【解决方案1】：

您可以使用 CSS 3（动画和关键帧）来实现。根本不需要 javascript。

.targetbox:target {
    animation: 2s ease 0s normal none 1 trgt;
}

@keyframes trgt {
    0% { background: #ff3; }
    100% { background: #ffa; }
}

…

看我的小提琴：http://jsfiddle.net/SCQev/1/

【讨论】：