当鼠标悬停时,关键帧动画可以正常播放...尽管原始文本不会消失。
我尝试尽我所知创建悬停关键帧动画,尽管现在停滞了(使用javascript更好吗?)。
.name:hover::after {
content: "";
animation: descriptionChange 3s linear infinite alternate;
}
@keyframes descriptionChange {
0% {}
10% {
content: "Lorem";
}
20% {
content: "delibus";
}
30% {
content: "faccae";
}
40% {
content: "repratia";
}
50% {
content: "enviroments";
}
60% {
content: "itation";
}
70% {
content: "alique";
}
80% {
content: "nuscitatiis";
}
90% {
content: "quis";
}
}
<span class="name">description</span> <br>
预期成绩:
•描述文字可见
•将鼠标悬停在描述文本上以激活关键帧动画
•说明文字随着关键帧动画的播放而变化
实际结果:
•描述文字可见
•将鼠标悬停在描述文本上以激活关键帧动画
•描述文本以及关键帧动画描述保持可见
最佳答案
将description
编写为伪元素的content
属性。当前,这是元素的文本内容,因此不受动画影响:
.name::after {
content: "description";
}
.name:hover::after {
animation: descriptionChange 3s linear infinite alternate;
}
@keyframes descriptionChange {
0% {}
10% {
content: "Lorem";
}
20% {
content: "delibus";
}
30% {
content: "faccae";
}
40% {
content: "repratia";
}
50% {
content: "enviroments";
}
60% {
content: "itation";
}
70% {
content: "alique";
}
80% {
content: "nuscitatiis";
}
90% {
content: "quis";
}
}
<span class="name"></span> <br>
关于javascript - 如何在悬停时用关键帧动画文本替换文本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57156020/