CSS Tip 系列（一）

程序员 Kevin Powell 每天在 Twitter 的 #CSSTipOfTheDay 话题下，发布一篇 CSS 技巧，这里做整理收藏。

1. 渐变色文字

https://codepen.io/kevinpowell/pen/MWYYxPe

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

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

2. 下划线动画效果

https://codepen.io/kevinpowell/pen/MWYwgOz

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

<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>

3. 顺滑混动

https://codepen.io/kevinpowell/pen/rNaVBYb

默认的锚点滚动是没有动画的，使用 scroll-behavior 可以设置顺滑的动画效果

html {
  scroll-behavior: smooth;
}

4. text-shadow 多阴影设置

https://codepen.io/kevinpowell/pen/eYmNmNW

<h2 class="so-many-shadows">This is fun</h2>

<style>
.so-many-shadows {
  text-shadow: 
    3px 3px 0 yellow, 
    6px 6px 0 blue, 
    9px 9px red,
    12px 12px 0 black;
 }
</style>

5. 背景混合

https://codepen.io/kevinpowell/pen/dyPMrEX

<div class="content">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<style>
.one, .two, .three {
  background-color: orange;
  background-image: url(https://picsum.photos/id/1005/600/600);
}
.one { background-blend-mode: screen; }
.two { background-blend-mode: multiply; }
.three { background-blend-mode: overlay; }
</style>

6. 相关链接

https://codepen.io/collection/nJzQBY
https://twitter.com/hashtag/CSSTipOfTheDay?src=hashtag_click&f=live