前端动画交互探索计划 —不定期（更新于20200404）

作为本职是设计的我，觉得还是有必要开个动画交互的栏目，让编程和设计能够结合，“利益最大化”。不定期更新，收集有趣或者自己想实现的动画效果。

感觉新年给自己立了个flag，希望自己能够坚持。 🍻

不定期更新的话，内容就按反向的顺序，新更新的就在上边。

技巧5：毛玻璃效果

    -webkit-backdrop-filter: saturate(180%) blur(6px);
    backdrop-filter: saturate(180%) blur(6px);

技巧4：海浪动效

<div class="wave"></div>
<style>
.wave {position: relative; width: 150px;height: 150px;background-color: #5291e0;overflow: hidden; border: 1px solid #f5f5f5; border-radius: 8px;}
.wave::before, .wave::after {  content: ""; position: absolute;  left: 50%; bottom: 15%; width: 500%; height: 500%;   border-radius: 45%; background-color: #fff;  transform: translateX(-50%);  animation: rotate 15s linear infinite; }
.wave::before { bottom: 10%;  opacity: .5; border-radius: 47%; }
@keyframes rotate {
  from {
    transform: translateX(-50%) rotateZ(0deg); }
  to {
    transform: translateX(-50%) rotateZ(360deg); } 
  }
</style>

技巧3：故障效果

使用了裁切功能clip-path，将多个文字和图案叠在一起，再裁切成多块，再应用交错动画，在视觉上制造出酷炫的故障效果（glitch）。

技巧2：下划线动画

<p>
Lorem ipsum dolor <a class="fancy-link" href="#">sit amet consectetur adipisicing elit. Impedit repudiandae assumenda beatae</a>, quo iure quaerat voluptate placeat. A eius cum, rem aspernatur ipsa illum. Commodi ullam cupiditate aliquid ducimus 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>

鼠标移动到文字上查看下划线 Hover 效果 :

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit repudiandae assumenda beatae, quo iure quaerat voluptate placeat. A eius cum, rem aspernatur ipsa illum. Commodi ullam cupiditate aliquid ducimus consequatur.

技巧1： CSS border-radius 斜线用法

border-radius 除了常用的四个值语法外，还有用斜线分割的最多8 个值的语法。具体用法可以看文章： [译] CSS border-radius 还可以这么用？写得十分详细了。

强烈推荐 FANCY-BORDER-RADIUS 可视化操控圆角的宝藏站点，作者是 Mirko and Nils 。方便学习 border-radius 属性。站点页面是这样子的：

https://9elements.github.io/fancy-border-radius/

还有进阶版本，可以控制8个角的可视化工具：8 POINT FULL CONTROL