持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
前言
最近在逛油管的时候，又看到了一个非常好玩的效果，让我发现原来 icon 也能玩的这么花哨，今天我们就一起来学习一下这个效果吧，老规矩，还是先来看一下最终实现的效果，如下图：
当鼠标滑过时，可以看到各种跳动的 icon，并且这些 icon 还在沿着不同的方向运动，下面我们就来实现一下吧！
准备工作
首先我们先将需要用到的 icon 准备一下，这里使用的 icon 来自 font-awesome，可以通过 CDN 的方式直接引入，CDN 的地址可以点击这里进行查看，如下图所示：
通过 CDN 引入相关资源后，我们需要到 font-awesome 官网去选择相关的 icon，可以点击这里打开官网，如下图所示：
然后你可以根据自己的喜欢，随意的选择30个 icon，接下来我们来看一下相关的 html，代码如下：
<section>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-meetup" aria-hidden="true"></i>
<i class="fa fa-telegram" aria-hidden="true"></i>
<i class="fa fa-arrows" aria-hidden="true"></i>
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
....
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-meetup" aria-hidden="true"></i>
<i class="fa fa-telegram" aria-hidden="true"></i>
<i class="fa fa-arrows" aria-hidden="true"></i>
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
....
</div>
</div>
</section>
这里用 section 标签在最外层包裹一层，是为了做全屏的设置，然后添加了一个 class 为 row 的 div 标签，这个 div 主要是展示每一行的元素，后续我们需要重复添加 30个 row，这里先画出第一个 row 的样式，大家就明白为什么要这么做了。
我们先来看一下一行的样式，相关的 css 代码如下：
*{
margin: 0;
padding: 0;
}
section {
position: relative;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
}
section .row {
position: relative;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
}
i {
color: rgba(0, 0, 0, .5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover {
transition: 0s;
color: #0f0;
text-shadow: 0 0 120px #0f0;
}
上述通过 flex 布局，将 row 中的两个 div 的按照行排列，这样的效果如果用以前的实现方式，就需要通过 float 来实现，现在有了 flex 就比较简单了，然后再给每个 icon 添加背景色，以及鼠标滑过的效果，最终实现如下图所示：
到这里我们就已经实现了一个最基本的滑过效果了，但是 icon 还不会滚动，接下来我们还需要将 icon 的排列方式修改为倾斜 30度，并且添加相关的动画效果，这些 icon 就会进行滚动了。
我们先修改一下相关的 css 样式，让 icon 变倾斜，相关代码如下：
... code
section .row {
position: relative;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
... code
只需要添加 transform: rotate(-30deg) 即可让 icon 倾斜 30度，展示效果如下：
写到这里，已经具备了一开始我们看到的效果的雏形，接下来就需要修改一下 html 代码了，还记得一开始说的需要添加 30个 row 元素吗？现在知道是为什么了吧？
只需要将 div.row 复制 30份 即可，这里就不贴相关代码了，后面会放出完整的案例。
动起来
当页面中有 30行 icon 列表后，我们就需要让它们滚动起来了，我们先来看一下 icon 列表静态的样子，如下图所示：
可以看到所有的 icon 都是静止的，而我们的效果中它们都是在移动，实现起来其实也很简单，只需要使用 CSS3 中的 animation 方法即可，相关 css 代码如下：
... other code
section .row div {
font-size: 1em;
white-space: nowrap;
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2) {
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate1 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-200%);
}
}
只需要给 row 下面的 div 元素添加相关的 animation 动画，并设置一个延迟执行的时间，它们就会滚动起来，效果如下图所示：
可以看到所有的 icon 已经动起来了，但是现在它们都沿着同一个方法进行移动，效果其实不好，我们还需要修改一下相关的 css 代码，让其中奇数行的 icon 沿着反方向移动，这样就有一个错落的效果，相关 css 代码如下：
...other code
section .row:nth-child(even) div {
font-size: 1em;
white-space: nowrap;
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2) {
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate3 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes animate4 {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(0);
}
}
我们通过 :nth-child() 这个伪类选择器，选择到 row 下面为奇数的 div 元素，然后给它设置一个反方向的动画效果，最终的实现可以在这里进行查看：
总结
不得不说的是，通过 CSS3 中的 animation 和 transform 属性，可以实现的效果真的很丰富，对于 CSS3 的学习和探索，还在继续，我们一起加油吧！
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
