css+vue+js => 电子木鱼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子木鱼</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
#app{
width:500px;
height:700px;
}
#app>button{
background:url('../../click1.jpg');
width:500px;
height:500px;
background-size:100%,100%;
border:None;
cursor:pointer;
}
#app>img{
position:absolute;
top:0px;
right:330px;
width:150px;
height:50px;
animation: mymove 2s 1 forwards; <!--1指循环一次，可不写;forwards将动画定格在最后一刻-->
}
@keyframes mymove{
from{opacity:1;
transform: translateY(200px);
}
to {opacity:0;
transform: translateY( -300px);} <!--向上平移100px+160px-->
}
</style>
</head>
<body>
<div id="app" >
<h2 style="text-align:center">已敲{{count}}功德 </h2>
<button type="button" @click="click1()" ></button>
<img v-show="ok" src="../../gongde.jpg" >
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
count:0,
count1:0,
ok:false,
},
methods:{
click1:function(){
this.count=this.count + 99;
this.count1 = 2;
this.ok = true;
setTimeout(()=> {
this.ok = false;
}, 300);
}
}
})
</script>
</body>
</html>click1.jpg => 
gongde.jpg=> 
最终结果：
电子木鱼
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
