這是帶有代碼的 JSFiddle。目標(biāo)：單擊按鈕應(yīng)僅.blur_filter_off將類應(yīng)用于. 整個(gè)文本應(yīng)保持原樣，即1行。當(dāng)前問題： 1）單擊按鈕會(huì)停用屬性而不是應(yīng)用類。2)單擊按鈕時(shí)文本分為2行。附加信息：一般情況下不確定，因?yàn)橄敕ㄈ缦拢鹤畛跬ㄟ^類模糊，并在通過類單擊按鈕時(shí)變得不模糊。也許有一種方法可以在不實(shí)現(xiàn)財(cái)產(chǎn)的情況下做到這一點(diǎn)。span id="hint"display:none.blur_filter_offdisplay:nonespan id="hint"blur_filter_onblur_filter_offdisplay:nonefunction showHint(id1) { var x = document.getElementById(id1).style; x.display = (x.display != "block") ? "block" : "none";}.example { color: #1f2c60; font-size: calc(0.7em + 2.3vw);}.blur_filter_on { filter: blur(0.35em);}.blur_filter_off { animation-name: blur_decrease; animation-timing-function: ease; animation-duration: 1s;}@keyframes blur_decrease { from { filter: blur(0.35em); } to { filter: blur(0); }}<div> <span class="example"><span class="blur_filter_on"><span id="hint">This is</span> the sentence i use as an</span> example.</span></div><a class=hint href="#" onclick="showHint('hint')">BUTTON</a>
1 回答
慕妹3242003
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是可以實(shí)現(xiàn)您指定的目標(biāo)的解決方案。我在這里使用普通的 javascript，你也可以使用 jQuery 來實(shí)現(xiàn)這一點(diǎn)。它還需要調(diào)整 HTML 和 CSS。
更新后的工作小提琴在這里
function showHint(id1) {
var x = document.getElementById(id1);
var blurOffClass = "blur_filter_off";
if (!x.classList.contains(blurOffClass)) {
x.classList.add(blurOffClass);
}
}
.example {
color: #1f2c60;
font-size: calc(0.7em + 2.3vw);
}
.blur_filter_on > * {
filter: blur(0.35em);
}
.blur_filter_off {
animation-name: blur_decrease;
animation-timing-function: ease;
animation-duration: 1s;
filter: blur(0);
}
@keyframes blur_decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}
<div>
<span class="example">
<span class="blur_filter_on">
<span id="hint">This is</span>
<span>the sentence i use as an</span>
</span>
example.
</span>
</div>
<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>
- 1 回答
- 0 關(guān)注
- 138 瀏覽
添加回答
舉報(bào)
0/150
提交
取消