企业网站的建设,路由器优化大师,u钙网logo设计文字头像,wordpress免费还是收费前言
前几天在朋友圈看到“敲电子木鱼”的视频#xff0c;敲一下木鱼就提示“功德 1”#xff0c;还带有敲击声和念经的声音#xff0c;感觉挺有意思的。
心血来潮#xff0c;捣鼓了一晚上#xff0c;借助码上掘金实现了这个功能。
展示效果
素材
准备素材如下#…前言
前几天在朋友圈看到“敲电子木鱼”的视频敲一下木鱼就提示“功德 1”还带有敲击声和念经的声音感觉挺有意思的。
心血来潮捣鼓了一晚上借助码上掘金实现了这个功能。
展示效果
素材
准备素材如下
木鱼网上找了一张木鱼的图片用PS简单处理成黑白的图片。* 敲木鱼音频、念经音频网上找了素材简单剪辑了一下。素材存放在服务器上方便码上掘金中引入。
代码块
首先思考一下展示效果。我们点击木鱼响起咚的一声次数1。同时我们可以在木鱼的右上角添加功德 1的文字闪现效果。
点击木鱼我们需要做的事情有
播放敲木鱼的声音计数1添加交互效果提示文字、木鱼动画等
其中计数很容易实现就不赘述了。
在Vue3中借助 audio 标签引入音频文件调用.play()方法可以播放音频
audio controls refaudio classaudsource srchttps://clemmensen.top/static/muyu.mp3 /
/audioscript setup const audio ref(null)
function playMuyu() {audio.value.play()
} /script 提示文字的实现是当敲击木鱼时给文字加上tipsActive的类名该类名带有动画效果文字会向上移动并消失。
keyframes textMove {from {top: 20%;opacity: 1;}to {top: 18%;opacity: 0;}
} 具体代码
div :class[tips, { tips-active: tipsActive }]{{tips}}
/divscript setup const tips ref(功德 1)
function clickMuyu() {count.value // 计数1tipsActive.value truesetTimeout(() {tipsActive.value false}, time.value)
} /script 相似的给木鱼加上敲击效果也就是点击会有缩放效果
keyframes muyuScale {0% {transform: scale(1);}50% {transform: scale(0.95);}100% {transform: scale(1);}
} 拓展
开始界面
刚开始是直接显示一个木鱼图片这里我们考虑添加一个自定义的开始界面包括“Start”按钮和上方的诗词“睡到僧廊响木鱼庄周蝴蝶两蘧蘧。”。在点击按钮后才进入木鱼图片并开始播放背景音乐。 背景音乐
点击Start时开始播放背景音乐。背景音乐的播放方法和上面提到的播放音频的方法一致这里就不赘述了。
提供多种提示文字
右边加上了文字选择功能可以选择功能、抗疫或Bug对应的提示文字会跟着改变。 后记
一个简单的小项目其中需要了解的地方是如何在vue3中使用audio标签引入音频文件。
最后
最近还整理一份JavaScript与ES的笔记一共25个重要的知识点对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识提升工作效率。 有需要的小伙伴可以点击下方卡片领取无偿分享
