微信小程序--律动按钮

效果展示（CSS实现）

Demo代码

wxml

代码语言：javascript复制

 <view class="start-box">
  <button id="start" class="bg-grey">签到</button>
 </view>

wxss

代码语言：javascript复制

.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

代码语言：javascript复制

 <view class="button">  
  <button class='button_btn' animation="{{animationData}}">签到</button>
</view>

wxss

代码语言：javascript复制

.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 () {

微信小程序

0 人点赞