如何使阴影淡入（用于HTML的CSS样式表）

huangapple
go评论86阅读模式
英文:

How to make the shadow fade in (css stylesheet for html)

问题

  1. 我想要当有人悬停在按钮上时，有些光晕淡入。我尝试了这段代码：
  1.  .discord_join_button:hover{
  2.     color: rgba(255, 255, 255, 1);
  3.     box-shadow: 0 0px 60px #2332d8;
  4.     animation-duration: 500ms;
  5. }
  1. 不知何故，这并不起作用，阴影突然出现
  3. 我原本期望它会淡入，而不仅仅出现
英文:

I want to make it so when somebody hovers over a button, some glow fades in. I tried that with this code:

  1.      .discord_join_button:hover{
  2.         color: rgba(255, 255, 255, 1);
  3.         box-shadow: 0 0px 60px #2332d8;
  4.         animation-duration: 500ms;
  5.     }

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

  1. .discord_join_button{
  2.     color: rgba(255, 255, 255, 1);
  3.     box-shadow: 0 0px 60px rgba(0,0,0,0);
  4.     transition: 500ms;
  5. }
  7. .discord_join_button:hover{
  8.     box-shadow: 0 0px 60px rgba(0,0,0,1);
  9. }
英文: 
  1.      .discord_join_button{
  2.         color: rgba(255, 255, 255, 1);
  3.         box-shadow: 0 0px 60px rgba(0,0,0,0);
  4.         transition: 500ms;
  5.     }
  7.      .discord_join_button:hover{
  8.         box-shadow: 0 0px 60px rgba(0,0,0,1);
  9.     }

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基本样式来实现“淡入”效果。例如：

  1. .discord_join_button {
  2.     color: rgba(255, 255, 255, 1);
  3.     transition: all 200ms ease;
  4. }
  6. .discord_join_button:hover {
  7.     box-shadow: 0 0 60px #2332d8;
  8. }

如果想了解更多关于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 -->

  1. .discord_join_button {
  2.     color: rgba(255, 255, 255, 1); 
  3.     transition: all 200ms ease;
  4. }
  6. .discord_join_button:hover {
  7.     box-shadow: 0 0 60px #2332d8; 
  8. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.     &lt;title&gt;Transition&lt;/title&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10.     &lt;button class=&quot;discord_join_button&quot;&gt;Hover me&lt;/button&gt;
  11. &lt;/body&gt;
  12. &lt;/html&gt;

<!-- end snippet -->

If you want to know more about the transition property: here.

huangapple
  • 本文由 发表于 2023年2月19日 03:36:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/75495920.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定