哇哦,icon 还能这么玩?

4,985 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情

前言

最近在逛油管的时候,又看到了一个非常好玩的效果,让我发现原来 icon 也能玩的这么花哨,今天我们就一起来学习一下这个效果吧,老规矩,还是先来看一下最终实现的效果,如下图:

face2.gif

当鼠标滑过时,可以看到各种跳动的 icon,并且这些 icon 还在沿着不同的方向运动,下面我们就来实现一下吧!

准备工作

首先我们先将需要用到的 icon 准备一下,这里使用的 icon 来自 font-awesome,可以通过 CDN 的方式直接引入,CDN 的地址可以点击这里进行查看,如下图所示:

image.png

通过 CDN 引入相关资源后,我们需要到 font-awesome 官网去选择相关的 icon,可以点击这里打开官网,如下图所示:

image.png

然后你可以根据自己的喜欢,随意的选择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 标签在最外层包裹一层,是为了做全屏的设置,然后添加了一个 classrowdiv 标签,这个 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 添加背景色,以及鼠标滑过的效果,最终实现如下图所示:

face2.gif

到这里我们就已经实现了一个最基本的滑过效果了,但是 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度,展示效果如下:

image.png

写到这里,已经具备了一开始我们看到的效果的雏形,接下来就需要修改一下 html 代码了,还记得一开始说的需要添加 30个 row 元素吗?现在知道是为什么了吧?

只需要将 div.row 复制 30份 即可,这里就不贴相关代码了,后面会放出完整的案例。

动起来

当页面中有 30行 icon 列表后,我们就需要让它们滚动起来了,我们先来看一下 icon 列表静态的样子,如下图所示:

face2.gif

可以看到所有的 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 动画,并设置一个延迟执行的时间,它们就会滚动起来,效果如下图所示:

face3.gif

可以看到所有的 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 中的 animationtransform 属性,可以实现的效果真的很丰富,对于 CSS3 的学习和探索,还在继续,我们一起加油吧!

最后,如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,谢谢大家

往期回顾

『 实战』从0到1,带你开发开发一款令人惊叹的时钟特效

CSS 复刻 iPhone14,并接到了优弧的电话😏,还不快接电话?

今年中秋的月亮真漂亮~

『 纯 CSS 实现』哇塞,彩虹🌈还能这么玩?

『 禁止吸烟🚭』纯 CSS 实现 | 禁烟也能做的这么酷炫

送你一个可爱的大圆脸😁,速来~

这么炫酷的 3D Menu 效果,真的不来看看?

产品经理:你这个效果不行,我想要一个五彩斑斓的黑!我:。。。