持续创作,加速成长!这是我参与「掘金日新计划 · 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
的学习和探索,还在继续,我们一起加油吧!
最后,如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,谢谢大家