英文:
How to make the shadow fade in (css stylesheet for html)
问题
我想要当有人悬停在按钮上时，有些光晕淡入。我尝试了这段代码：
.discord_join_button:hover{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px #2332d8;
animation-duration: 500ms;
}
不知何故，这并不起作用，阴影突然出现
我原本期望它会淡入，而不仅仅出现
英文:
I want to make it so when somebody hovers over a button, some glow fades in. I tried that with this code:
.discord_join_button:hover{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px #2332d8;
animation-duration: 500ms;
}
for some reason this isn't working and the box-shadow just pops into existence
I was expecting it to fade, not just show up
答案1
得分: 0
.discord_join_button{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px rgba(0,0,0,0);
transition: 500ms;
}
.discord_join_button:hover{
box-shadow: 0 0px 60px rgba(0,0,0,1);
}
英文:
.discord_join_button{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px rgba(0,0,0,0);
transition: 500ms;
}
.discord_join_button:hover{
box-shadow: 0 0px 60px rgba(0,0,0,1);
}
Use rgba.
And transition should be applied before hover.
I don't know if it's what you want, but if you write the box-shadow value in reverse, it's also possible to make it work in reverse.
答案2
得分: 0
你可以通过将transition属性指定给button基本样式来实现“淡入”效果。例如：
.discord_join_button {
color: rgba(255, 255, 255, 1);
transition: all 200ms ease;
}
.discord_join_button:hover {
box-shadow: 0 0 60px #2332d8;
}
如果想了解更多关于transition属性的信息，请访问此链接：这里。
英文:
you can achieve the "fade in" effect by specifying the transition property to the button base style. For example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.discord_join_button {
color: rgba(255, 255, 255, 1);
transition: all 200ms ease;
}
.discord_join_button:hover {
box-shadow: 0 0 60px #2332d8;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition</title>
</head>
<body>
<button class="discord_join_button">Hover me</button>
</body>
</html>
<!-- end snippet -->
If you want to know more about the transition property: here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论