前言

  Heo写了个ios版电子木鱼,最近电子木鱼确实挺火。
  必须也给博客安排上,一个养生的互联网小站不能没有电子木鱼!


  1.0写得比较粗糙,简单的积功德,敲敲敲,还有功德+100。等以后再完善什么见初音未来、随机弹涩图减功德的功能吧,咕咕咕咕。


实现

1
2
3
4
5
6
7
8
9
10
11
<div class="muyu-layout">
<div id="jishu-box">
<p id="jishu">功德:0</p>
</div>
<div id="muyu-box">
<p id="gongde">功德+100</p>
<img id="muyu" class="no-lightbox entered loaded"
src="data:image/png;base64,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">
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.muyu-layout {
background: black;
display: flex;
width: 100%;
border-radius: 20px;
position: relative;
justify-content: center;
height: 90vh;
align-items: center;
}
#muyu-box img {
width: 250px;
}
#jishu-box{
top: 55px;
position: absolute;
}
#muyu-box p {
color: white;
opacity: 0;
font-size: 25px;
}
#jishu-box p {
color: white;
font-size: 30px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gongde = document.getElementById("gongde");
var muyu = document.getElementById("muyu");
var jishu = document.getElementById("jishu-box");
var mp3Url = "/music/muyu.mp3";
var player = new Audio(mp3Url);
var num = 0;
muyu.addEventListener("click", function () {
num+=100;
player.load();
player.play();
muyu.animate([{ transform: 'scale(0.85)' }, { transform: 'scale(1.03)' }, { transform: 'scale(1)' }], 500);
gongde.animate([{ opacity: 0, transform: 'translateY(0)' },{ opacity: 0.3, transform: 'translateY(-10px)' },{ opacity: 0.8, transform: 'translateY(-20px)' }, { opacity: 1, transform: 'translateY(-30px)' }, { opacity: 0.8, transform: 'translateY(-35px)' }, { opacity: 0, transform: 'translateY(-40px)' }], 600);
jishu.innerHTML = "<p id='jishu'>功德:"+num+"</p>";
});


  当然想和我一样博客单页放电子木鱼,也只需新建个单页,直接cv下面的内容进去即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{% raw %}
<div class="muyu-layout">
<div id="jishu-box">
<p id="jishu">功德:0</p>
</div>
<div id="muyu-box">
<p id="gongde">功德+100</p>
<img id="muyu" class="no-lightbox entered loaded"
src="data:image/png;base64,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">
</div>
</div>
<style>
.muyu-layout {
background: black;
display: flex;
width: 100%;
border-radius: 20px;
position: relative;
justify-content: center;
height: 90vh;
align-items: center;
}
#muyu-box img {
width: 250px;
}
#jishu-box{
top: 55px;
position: absolute;
}
#muyu-box p {
color: white;
opacity: 0;
font-size: 25px;
}
#jishu-box p {
color: white;
font-size: 30px;
}
</style>
<script>
var gongde = document.getElementById("gongde");
var muyu = document.getElementById("muyu");
var jishu = document.getElementById("jishu-box");
var mp3Url = "/music/muyu.mp3";
var player = new Audio(mp3Url);
var num = 0;
muyu.addEventListener("click", function () {
num+=100;
player.load();
player.play();
muyu.animate([{ transform: 'scale(0.85)' }, { transform: 'scale(1.03)' }, { transform: 'scale(1)' }], 500);
gongde.animate([{ opacity: 0, transform: 'translateY(0)' },{ opacity: 0.3, transform: 'translateY(-10px)' },{ opacity: 0.8, transform: 'translateY(-20px)' }, { opacity: 1, transform: 'translateY(-30px)' }, { opacity: 0.8, transform: 'translateY(-35px)' }, { opacity: 0, transform: 'translateY(-40px)' }], 600);
jishu.innerHTML = "<p id='jishu'>功德:"+num+"</p>";
});
</script>

{% endraw %}


后记

  用Animations控制CSS动画比用js模拟动画好用多了。