真心话张不开口，今天就用代码说出来，快来吃瓜~

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

介绍

我们本期要实现一个有趣的效果，说来也简单，就是我们是用scss轮流把句子输出到屏幕上，但是的重点是加特技！加特技！加特技！！

看完是不是有点心痒难耐，也想对你的在意的人也说一大堆真心话（如果还没拉黑的话。。）。

我们本期将用vite构建项目，用scss去完成效果的变化。握好方向盘，接下来，要开始咯~

正文

1.构建项目

yarn init -y

yarn add -D vite

我们初始化项目后，安装一下vite

yarn add -D sass node-sass

再安装scss文件的解析插件

2.页面结构

<div id="app"></div>
<script type="module" src="./app.js"></script>

我们建一个index.html里面只放一个div作为主容器，引入app.js里面将写页面逻辑

/*app.js*/
import "./css/style.scss"

;(function() {
    let words = [
      "如果开心",
      "是本领的话",
      "我希望你",
      "是最厉害的"
    ]
    let _wrapper = document.createElement("div");
    _wrapper.className = "word-wrapper"
    document.getElementById("app").appendChild(_wrapper)
    words.forEach(word => {
      let _div = document.createElement("div");
      _div.className = "word";
      _div.innerHTML = word;
      _wrapper.appendChild(_div);
    })
})()

app.js中我们可以引入scss的样式文件，然后写一个放了很多句子的数组，创建容器然后把这些句子用div包裹起来放到容器内。

3.实现效果

@use "sass:math";
$time: 12s;
$count: 4;

我现在style.scss中头部放好变量和引入函数。

$time作为总动画播放时长，$count则为句子数量，刚才是4句所以这里也是4。

我们引入math函数是为了进行一个除法计算，sass后期对除法符号不支持了，用math.div去进行计算

.word-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  position: relative;
  filter: contrast(30) blur(1px);
}

我们要做的差值模糊效果核心就是容器上放置contrast,下面子元素做模糊blur。

例如：

.wrapper{
    filter: contrast(30);
}
.wrapper>div{
   filter: blur(20px);
}

接下来我们要渲染文字了：

.word-wrapper {
    // ...
  .word {
    width: 100%;
    font-size: 6em;
    color: rgb(245, 222, 45);
    -webkit-text-stroke:1px rgb(245, 108, 45);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    font-family: Tahoma;
    text-shadow: -1px 0 3px #c6bb9f, 0 1px 3px #c6bb9f,
      5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
  }
}

我们通过绝对定位与动画定位将元素全面居于中间。并配置好一些描边，投影，色调，大小等。

此时，句子是堆叠在一起的，我们如何把他逐个显示呢？

接下来我们将在里面写入动画来完成他的逐个显示

.word {
    // ...
	animation: show-word $time infinite ease-in-out;
    @for $i from 0 to $count {
      &:nth-child(#{$i + 1}) {
        animation-delay: math.div($time, $count) * $i - $time;
      }
    }
}

@keyframes show-word {
    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }
    25%,
    75% {
        filter: blur(16px);
        opacity: 0;
    }
}

我们最关键的是通过scss遍历绑定他们各自句子的延迟时间。然后去做一个交替显隐的动画，记得算准隐藏时机。别忘了刚才说的，math.div($time,$count)就相当于$time/$count，用来计算单个延迟多久。

到这里我们就大功告成了，炒鸡简单有木有，在线演示

---

咳咳，如果对谁发了真心话的，结果被拉黑则与本期效果无关。。