码上掘金实现电子木鱼

首先，思考一下展示效果。我们点击木鱼，响起"咚"的一声，次数+1。同时，我们可以在木鱼的右上角添加"功德%20+1"的文字闪现效果。

点击木鱼，我们需要做的事情有：

• 播放敲木鱼的声音
• 计数+1
• 添加交互效果（提示文字、木鱼动画等）

其中，计数很容易实现，就不赘述了。

在Vue3中，借助%20audio%20标签引入音频文件，调用.play()方法可以播放音频：

<audio%20controls%20ref="audio"%20class="aud">
%20%20<source%20src="https://clemmensen.top/static/muyu.mp3"%20/>
</audio>

<script%20setup>
const%20audio%20=%20ref(null)
function%20playMuyu()%20{
%20%20audio.value.play()
}
</script>

提示文字的实现是，当敲击木鱼时，给文字加上tipsActive的类名，该类名带有动画效果，文字会向上移动并消失。

@keyframes%20textMove%20{
%20%20from%20{
%20%20%20%20top:%2020%;
%20%20%20%20opacity:%201;
%20%20}
%20%20to%20{
%20%20%20%20top:%2018%;
%20%20%20%20opacity:%200;
%20%20}
}

具体代码：

<div%20:class="['tips',%20{%20'tips-active':%20tipsActive%20}]">
%20%20{{tips}}
</div>

<script%20setup>
const%20tips%20=%20ref('功德%20+1')
function%20clickMuyu()%20{
%20%20count.value%20++%20//%20计数+1
%20%20tipsActive.value%20=%20true
%20%20setTimeout(()%20=>%20{
%20%20%20%20tipsActive.value%20=%20false
%20%20},%20time.value)
}
</script>

相似的，给木鱼加上敲击效果，也就是点击会有缩放效果：

@keyframes%20muyuScale%20{
%20%200%%20{
%20%20%20%20transform:%20scale(1);
%20%20}
%20%2050%%20{
%20%20%20%20transform:%20scale(0.95);
%20%20}
%20%20100%%20{
%20%20%20%20transform:%20scale(1);
%20%20}
}