前言
今年是龙年，时间过得真快，2024年了，在这里祝各位掘友2024龙年快乐。对于2024年我想对自己说的是，希望自己继续越来越好。好了，我们回归正题，既然是龙年，我趁着在公司最后几天的上班摸鱼时间，带大家来实现一个和龙元素相关的简易效果。话不多说，咱们直接看下面的效果预览。
效果预览
以上就是整个效果的预览状态，接下来将带大家完整实现它~
HTML
整个效果可以分为两个个场景，首先是一个点击页，通过点击某个内容，再进入到接下来的第二个场景，舞龙和放鞭炮，鞭炮结束后，就全部消失，随后刷新页面重复此操作即可。
现在分别对这两个场景实现代码。首先是第一场景，相关代码如下。
<div class="special">龙年大吉 龙重登场</div>
<div style="text-align: center; margin-top: 16px">
点击下方图片进入龙年第二场景；效果结束后刷新页面即可
</div>
<div class="dragon-poplayer" id="dragon-poplayer">
<div class="dragon-section dragon-ready-play" id="dragon-ready-play">
<div class="dragon-play">
<!-- 第一场景 -->
<div class="music">
<input type="checkbox" name="music" id="music-control" checked />
</div>
<div id="music">
<audio src="" loop="loop" preload="load"></audio>
</div>
</div>
</div>
像龙年大吉 龙重登场这样的文本部分我们不做过多赘述，直奔重点内容，我们在这里创建了一个具有特殊样式和id属性为dragon-poplayer的<div>元素，一个具有特殊样式和id属性为dragon-ready-play的<div>元素，一个具有特殊样式和id属性为music的<div>元素，其中包含了一个<audio>元素，用于播放音乐。我们在HTML部分大量使用了id属性和特殊样式，这是为了方便我们后面通过JS来控制各个元素的样式以及操作。
另外值得一提的是，虽然我们使用到了audio标签，以及id命名为music，可以很多人会认为会有音乐播放器相关的内容，但是并不是这样。本来是打算在音乐的播放中来进行相关操作的，但是由于没有找到合适的音乐，因此就放弃了这个想法，如果大伙有合适的音乐可以贴在评论区。
接下来是第二场景，相关代码如下。
<div class="dragon-section dragon-playing" id="dragon-playing">
<!-- 第二场景 -->
<div class="dragon-wrap">
<div class="dragon-content">
<div class="dragon dragon1"></div>
<div class="dragon dragon2"></div>
<div class="dragon dragon3"></div>
<div class="dragon dragon4"></div>
<div class="dragon dragon5"></div>
</div>
<div class="firecrackers firecrackers-left"></div>
<div class="firecrackers firecrackers-right"></div>
</div>
</div>
</div>
在第二场景中，分别由龙和爆竹两部分组成。<div class="dragon dragon1"></div>、<div class="dragon dragon2"></div>、<div class="dragon dragon3"></div>、<div class="dragon dragon4"></div>、<div class="dragon dragon5"></div>这些是带有特殊样式的div元素，分别表示5个龙，也就是我们从效果中可以看到的五个龙身。<div class="firecrackers firecrackers-left"></div>、<div class="firecrackers firecrackers-right"></div>这是带有特殊样式的div元素，分别表示左侧和右侧的爆竹。
总体而言，这是一个用于展示龙年主题的页面。
JS
紧接着我们来看一下JS部分的代码，这里就是整个效果的控制核心部分了，相关代码如下。
<script>
function musicPlayer() {
var dragonStage = document.getElementById("dragon-poplayer"),
switcher = document.getElementById("music"),
media = switcher.getElementsByTagName("audio")[0],
chooseMusic = document.getElementById("music-control"),
wantedDragonDance = document.getElementById("dragon-ready-play"),
dragonDanceStar = document.getElementById("dragon-playing"),
firecrackers = document.querySelector(".firecrackers");
switcher.addEventListener(
"click",
function () {
var currentStatus = media.paused ? "pause" : "play";
var wantedStatus =
currentStatus === "pause" && !chooseMusic.checked
? "play"
: "pause";
media[wantedStatus]();
if (!wantedDragonDance.classList.contains("is-animationed")) {
wantedDragonDance.classList.add("is-animationed");
}
},
false
);
wantedDragonDance.addEventListener("webkitAnimationEnd", function () {
dragonDanceStar.classList.add("is-animationed");
});
firecrackers.addEventListener(
"webkitAnimationEnd",
function (e) {
media.pause();
document.body.removeChild(dragonStage);
},
false
);
}
function init() {
musicPlayer();
}
document.addEventListener("DOMContentLoaded", init, false);
</script>
首先，通过document.getElementById方法获取了页面上的一些元素，如开关按钮、播放器等。
接下来，通过addEventListener方法给开关按钮添加了一个点击事件的监听器。当点击按钮时，会根据当前状态来切换播放和暂停，同时，如果播放龙舞动画的元素没有添加动画类名，则添加该类名。
然后，通过添加webkitAnimationEnd事件监听器，当播放龙舞动画的元素的动画结束时，给另一个元素添加动画类名。
最后，通过添加webkitAnimationEnd事件监听器，当爆竹动画结束时，暂停音乐并从页面中移除龙舞动画的元素。
整体来说，通过JS的控制能力让该效果在特定的时机添加了一些动画，从而达到舞龙的效果。
CSS
JS控制的是什么，毫无疑问在这里我们控制的是CSS的样式，通过上面的JS代码我们可以知道，CSS动画就是这样控制的。因此，我们来看看这里的CSS动画是如何设计的。
.dragon-ready-play.is-animationed {
animation: fadeOut 1.5s ease-in both;
}
.dragon-playing.is-animationed {
animation: fadeIn 1.5s ease-in both;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
这里定义了两个动画效果，分别是fadeOut和fadeIn。fadeOut动画效果是让元素从完全不透明 （opacity: 1） 逐渐变为完全透明 （opacity: 0）。动画持续时间为1.5秒，使用ease-in的时间函数，同时应用于元素的开始和结束状态。fadeIn动画效果是让元素从完全透明 （opacity: 0） 逐渐变为完全不透明 （opacity: 1）。动画持续时间为1.5秒，使用ease-in的时间函数，同时应用于元素的开始和结束状态。
这两个动画效果分别用于类名为.dragon-ready-play.is-animationed和.dragon-playing.is-animationed的元素。当这两个类名同时存在于一个元素时，会分别应用相应的动画效果。
.dragon-playing.is-animationed .firecrackers {
-webkit-animation: bianpao 0.2s steps(2) infinite,
bianpao2 6s linear both;
animation: bianpao 0.2s steps(2) infinite, bianpao2 6s linear both;
}
.dragon-playing.is-animationed .firecrackers:after {
-webkit-animation: lihua 0.2s steps(2) infinite,
fadeOut 0.2s linear 6s both;
animation: lihua 0.2s steps(2) infinite, fadeOut 0.2s linear 6s both;
}
@-webkit-keyframes bianpao2 {
from {
max-height: 166px;
}
to {
max-height: 0;
}
}
@keyframes bianpao2 {
from {
max-height: 166px;
}
to {
max-height: 0;
}
}
@keyframes lihua {
to {
background-position: -122px;
}
}
这里就是两侧的鞭炮效果的动画了，单就这个鞭炮效果来说，也是非常经典的，后面我会这种鞭炮效果的实现单独写一篇文章。
首先指定了两个动画效果bianpao和bianpao2，并设置了动画时长、步数、无限循环等属性。接下来，通过:after伪元素选择器，为firecrackers元素的伪元素添加了另外两个动画效果lihua和fadeOut，同样设置了动画时长、步数、无限循环等属性。最后，定义了两个动画的关键帧，分别描述了bianpao2动画的起始和结束状态，以及lihua动画的结束状态。
总的来说，这段代码实现了一个放烟花的动画效果，烟花从有到无的过程。
.dragon-playing.is-animationed .dragon1 {
-webkit-animation-name: dragon-1;
animation-name: dragon-1;
}
@keyframes dragon-1 {
to {
background-position: -881px;
}
}
最后就是舞龙的动画了，舞龙就是通过位置的变化来实现龙的舞动。换句话说就是将元素的背景位置移动到 xxx px。比如上面这段动画，其效果就是将背景位置移动到 -881px，如果有多个，就一直添加即可。
由于CSS代码部分比较多，也涉及到很多图片，因此更详细的代码可以去码上掘金查看，这里主要介绍的是动画部分。
总结
以上就是整个效果的实现过程，代码会比较多，主要是CSS样式会涉及地比较多。虽然效果会略显简单粗糙，但是不失龙年气息。通过CSS来搭配JS来实现这个舞龙的效果，大家也可以亲自去尝试一下，只有尝试了才知道效果如何。
最后，该效果的完整代码在码上掘金里可以查看，如果有什么问题欢迎大家在评论区里讨论，并且如果有可以让它变地更好的地方欢迎大家在评论区告诉我~
