sách gpt4 ai đã đi

html - 在 :hover and :active? 上具有不同效果的 CSS 动画

In lại 作者:行者123 更新时间:2023-11-27 22:28:32 36 4
mua khóa gpt4 Nike

biên tập 演示在这里:http://3.cnxical.appspot.com

text-shadow 属性在悬停时发生变化,并且通过 animation-fill-mode cài đặt forwards 状态保持不变。

:active 状态的动画不工作,点击标题时没有任何反应。

预期的行为是标题应该消失,因为 text-shadow 属性设置为(并且这两个都已尝试)không có hoặc 0 0 1px透明。为 :active 设置 text-shadow 也尝试过没有动画,但没有成功。

如何才能实现正确的行为?

代码是:

            #title {
vị trí: tuyệt đối;
cursor:pointer;
text-align:center;
top:15%;
left:50%;
-webkit-transform:translate(-50%,-50%);
color:transparent;
text-shadow:0 0 10px lime;
font-size:5vmin;
font-weight:bold;
font-family:"Courier New",Courier,monospace;
-webkit-animation: push_title_focus 0.3s;
}
#title:active {
-webkit-user-select:none;
-webkit-animation: vanish_title 0.3s;
}
#title:hover {
-webkit-animation: pull_title_focus 0.3s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes pull_title_focus {
from { text-shadow: 0 0 10px lime; }
to { text-shadow: 0 0 1px lime; }
}
@-webkit-keyframes push_title_focus {
from { text-shadow: 0 0 1px lime; }
to { text-shadow: 0 0 10px lime; }
}
@-webkit-keyframes vanish_title {
from { text-shadow: 0 0 1px lime; }
to { text-shadow: none !important; }
}

1 Câu trả lời

当您按下鼠标按钮激活链接时,鼠标仍指向它,因此它仍处于悬停状态。

#title:hover#title:active 同样具体,悬停规则最后定义。

任何具有在两个规则集中指定的属性的规则,将被 :hover 规则(包括 -webkit-animation)覆盖。

重新排序您的规则集,使 :hover 规则出现在 :active 规则之前。

关于html - 在 :hover and :active? 上具有不同效果的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20685217/

36 4 0
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com