【CSS】文字毛玻璃效果(简单版)

KuaiKan 2022-4-26 920

用文本阴影和字体透明颜色就可以做出毛玻璃的效果。这是一个纯 css 的方式。

text-shadow 设置投影效果,看上去就有点像毛玻璃的感觉。

cursor: default; 让鼠标放到文字上时,不会出现“光标” 指针。

<div>毛玻璃</div>

<style>
  div {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 10px #000;
    cursor: default;
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
  
  div:hover {
    color: rgba(0, 0, 0, 1);
    text-shadow: none;
  }
</style>

效果

毛玻璃


签名:这个人很懒,什么也没有留下!
最新回复 (0)
返回