Question

我无法弄清楚如何在文字输入中制作动画颜色。

这是css：

@keyframes anim {
    0% {
        opacity: 0.2;
        color:blue;
    }

    70% {
        opacity: 1;
        color: red;
    }

    100% {
        opacity: 0.1;
        color: blue;
    }
}

input,
input::-webkit-input-placeholder {
    animation: anim 4s;

}

HTML：

<input type="text" placeholder="Hello" />

JsBin： https://jsbin.com/yejiwipego/1/edit?html,css,output

不透明度变好了。我一定得错过什么？

Answer 1

我有点工作了，但是占位符文本的不透明度似乎搞得一团糟。我希望这是（某种）你的意思：

编辑;我让它工作得更好。检查新的JSFiddle

更新版本：https://jsfiddle.net/oycnfxw4/

element {
  --main-text-color: rgba(0,0,255,0.8);
}

input, input::-webkit-input-placeholder {
    color: var(--main-text-color);
    -webkit-animation: anim 4s linear 1 forwards;
    animation: anim 4s linear 1 forwards;
}

@keyframes anim {
    0% {
        opacity: 0.2;
        --main-text-color: rgba(0,0,255,0.2);
    }

    70% {
        opacity: 1;
        --main-text-color: rgba(255,0,0,1);
    }

    100% {
        opacity: 0.1;
        --main-text-color: rgba(0,0,255,0.5);
    }
}

更改动画中的占位符颜色

1 个答案: