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

前言

有很多教育机构的官网，再报名后会有一个进入课程的按钮。如果该课程正在直播，那么一般会在按钮上加一个gif，好几个跳动的短杠在告诉用户当前课程正在直播，快点击它。今儿，我们就用纯css实现一个跳动音符的效果。

先来看看页面结构。其中，外部为包裹容器，内部div为跳动的短杠。

<div class="music active">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

先整点基本的样式，让页面结构凸显出来。

* {
	margin: 0;
	padding: 0;
}

.music {
	width: 50px;
	height: 1px;
	margin: 100px auto;
	position: relative;
}

.music div {
	width: 4px;
	height: 5px;
	position: absolute;
	bottom: 0;
	background-color: #333;
}

.music div:nth-of-type(1) {
	left: 0;
}

.music div:nth-of-type(2) {
	left: 8px;
}

.music div:nth-of-type(3) {
	left: 16px;
}

.music div:nth-of-type(4) {
	left: 24px;
}

.music div:nth-of-type(5) {
	left: 32px;
}

.music div:nth-of-type(6) {
	left: 40px;
}

这时，页面中的效果是这样的。

这能看出什么嘛？一个省略号？nonono，你这样想就错了，很多css的效果都需要写点动画，控制动画的频率来达成。目前我们只是实现了一个基本的页面框架。

那么我们应该怎么添加动画来让他有跳动的感觉？我们吧动画状态分为三部分，0%，50%，100%。我们设置0%为一个状态，50%height变为最大，100%height变短一些。这样，一个短杠的跳动感就有了。那又如何让整体不规则跳动呢？这就涉及动画触发的时机了。我们这块采用每个线段执行一次动画的周期不一来实现波浪变化。具体代码如下：

.music.active div:nth-of-type(1) {
    animation: wave 0.66s linear infinite;
}

.music.active div:nth-of-type(2) {
    animation: wave 0.8s linear infinite;
}

.music.active div:nth-of-type(3) {
    animation: wave 0.7s linear infinite;
}

.music.active div:nth-of-type(4) {
    animation: wave 0.5s linear infinite;
}

.music.active div:nth-of-type(5) {
    animation: wave 0.9s linear infinite;
}

.music.active div:nth-of-type(6) {
    animation: wave 1.2s linear infinite;
}


@keyframes wave {
    0% {
        height: 8px
    }

    50% {
        height: 32px
    }

    100% {
        height: 12px
    }
}

到这一步，我们的动画基本就完成了，看看具体效果吧。

纯css教你实现跳动音符。

前言