.tooltiptext {
position: relative;
display: inline-block;
}
.tooltiptext:after {
content: "";
}
.popUpWord {
color: pink;
white-space: nowrap;
}
.popUpWordBlack {
color: black;
}
.outPop {
margin: auto;
background: none;
overflow: hidden;
display: block;
position: absolute;
animation-play-state: unset;
left: 0;
top: 0;
width:0;
}
.outPopBlack:hover + .outPop,
.outPop:hover {
animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
display: block;
position: relative;
z-index: 0;
}
@keyframes stripes {
to {
width: 100%;
}
}
<span class="tooltiptext">
<span class="outPopBlack">
<span class="popUpWordBlack">hello World</span>
</span>
<span class="outPop">
<span class="popUpWord">hello World</span>
</span>
</span>
如果你沒有使用多條線路,你可以用這個方法,
添加 「顯示:inline-block的;」 to tooltiptext
add white-space:nowrap; to .popUpWord,
改變.outPop的風格爲 margin:auto; background:none; 溢出:隱藏; display:block; position:absolute; animation-play-state:unset; left:0; top:0; 寬度:0;
,你也可以在更短的代碼中使用這些方法
.text {
position: relative;
display: inline-block;
z-index: 0;
}
.text:after {
content: "HEllo World";
position: absolute;
z-index: 1;
color: red;
left: 0;
top: 0;
width: 0;
white-space: nowrap;
overflow: hidden;
transition: 500ms linear all;
}
.text:hover:after {
width: 100%;
}
.text1 {
position: relative;
display: inline-block;
z-index: 0;
}
.text1>.dup {
content: "HEllo World";
position: absolute;
z-index: 1;
color: red;
left: 0;
top: 0;
width: 0;
white-space: nowrap;
overflow: hidden;
transition: 500ms linear all;
}
.text1:hover>.dup {
width: 100%;
}
<div class="text">
HEllo World
</div>
<br>
<br>
<div class="text1">
HEllo World
<span class="dup">HEllo World</span>
</div>
十分感謝!有沒有一種方法可以顯示從左到右的彩色文本,而沒有兩個重疊的跨度?當試圖在DOM中查找元素時,它很複雜。 – Techs
是的..我剛剛在我的答案中添加了代碼..請參閱 – Nandhu
我正在看代碼。在你的例子中,它的工作原理是因爲你在css的'content'屬性中指定了覆蓋文本。如果你使用不同的短語,這怎麼辦? – Techs