1

我刚刚开始学习 html 和 css，我不完全确定我在做什么，但是..

我添加了一个 :hover 过渡，这样当我将鼠标悬停在标题“FIENDS”上时，它会从 #000000 消失到 #800000。我已经实施了哪些，哪些有效。我还添加了 css :active，因此当我单击标题“FIENDS”时，它会立即从 #800000 切换到 #ffffff。但目前它并没有立即切换，它似乎正在使用我为 :hover 设置的过渡并淡入 #ffffff。有人对此有解决方案吗？

谢谢。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Fiends</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content="Fiends" />
</head>
<body>
    <div>
        <h1 class="centertext"><fade>FIENDS</fade></h1>
    </div>
</body>
<html>

CSS

html {
    background-color: #ffffff}

body {
    font-family: bebas neue;
    text-align: center;}

h1 {
    color: #000000;
    font-weight: normal;
    font-size: 200px;
    letter-spacing: 15px;}

h1.centertext {
    margin: 225px auto auto auto}

fade { 
    color: #000000; 
    -webkit-transition: color .12s linear;
    -moz-transition: color .12s linear;
    -ms-transition: color .12s linear;
    -o-transition: color .12s linear;
    transition: color .12s linear;}

fade:hover {
    color: #800000;}

fade:active {
    color: #ffffff}
4

1 回答 1

1

您可能必须使用 JavaScript 来获得所需的完整动画效果。您可以更改 中的transition属性:active，例如：

fade:active {
    transition: none;
    color: #fff;
}

http://jsfiddle.net/Rppmd/

然而，transition当它不再处于活动状态时不会被覆盖，因此元素仍会淡入（即解决方案并不完美）。

使用 JavaScript，您可以完全删除transition并让 JS 完成所有动画。这将允许您设置动画时间，例如在悬停时。在mousedown和上mouseup，不需要动画，只需改变颜色。

于 2013-10-09T15:06:48.003 回答