微信小程序--律动按钮
原创
©著作权归作者所有:来自51CTO博客作者海轰Pro的原创作品,请联系作者获取转载授权,否则将追究法律责任
效果展示(CSS实现)
Demo代码
wxml
<view class="start-box">
<button id="start" class="bg-grey">签到</button>
</view>
wxss
.start-box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
animation: scaleDraw 5s ease-in-out infinite;
}
.start-box button{
color: white;
background-color: orange;
}
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1);
/*开始为原始大小*/
}
25% {
transform: scale(1.1);
/*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.1);
}
}
@keyframes living {
0% {
transform: scale(1);
.
.
.
.
.
.
.
完整代码获取见文末
效果展示(js实现)
Demo代码
wxml
<view class="button">
<button class='button_btn' animation="{{animationData}}">签到</button>
</view>
wxss
.button{
width: 92%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.button button{
padding: 0rpx;
}
.button_btn{
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-weight: 500;
margin-top: 100rpx;
background: #ffcc01;
border-radius: 60rpx;
color:white;
}```
### js
```python
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
onLoad: function () {
this.doAnimation()
},
doAnimation: function () {
.
.
.
.
.
.
.
js实现参考:https://mp.weixin.qq.com/s/TK84jhv17xx4mcyQswFtoQ
完整代码获取如下