Question

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

我添加了一个：悬停转换，这样当我将鼠标悬停在我的标题“FIENDS”上时，它会从＃000000逐渐消失到＃800000。我已经实施了哪个有效。我还添加了css：active，这样当我点击我的标题“FIENDS”时，它会立即从＃800000切换到#ffffff。但目前它并没有立即切换，它似乎正在使用我设置的转换：悬停和淡入#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}

Answer 1

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

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

http://jsfiddle.net/Rppmd/

然而transition在不再有效时不被覆盖，因此该元素仍将淡入（即解决方案并不完美）。

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

不需要的转换：活动的css

1 个答案: