CSS 技巧

令你驚歎的CSS技巧大全

　　CSS是一門很特殊的語言，不像一般的程式語言那樣需要抽象的思維和嚴密的邏輯，它真正需要的是想象力——將你腦中所想的意象用程式碼來表現出來。那麼意象又是如何產生的呢？最常用的方法就是探索和觀察。

技巧1：漸變色文字

<style>
    /* 方式1 */
    .gradient-text1 {
          background-image: linear-gradient(90deg, red, blue);
          background-clip: text;
          color: transparent
 
;
    }

    /* 方式2 */
    .gradient-text2 {
            background-image: linear-gradient(90deg,#00ffcd,#10cbf8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
    }
</style>

<h2 class="gradient-text1">Gradient text</h2>
<h2 class="gradient-text2"
 
>Gradient text</h2>

效果：

技巧2：下換線動畫效果

<style>
.fancy-link {
  text-decoration: none;
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 3px;
  transition: background-size 500ms ease-in-out;
}

.fancy-link:hover 
 
{
  background-size: 100% 3px;
}
</style>

<p>Lorem ipsum dolor <a class="fancy-link" href="#">sit amet ... beatae</a>, quo iure ... consequatur.</p>

效果：

滑鼠移入前：

滑鼠移入後：

• https://www.jb51.net/css/623534.html
• https://www.jb51.net/css/644091.html
• https://juejin.im/post/5e34d266f265da3e177f2000?utm_source=gold_browser_extension
• https://zhuanlan.zhihu.com/p/92721841?utm_source=com.gzqwkj.cshu