小程序UI搭建＋波纹按钮特效

本文介绍小程序用户首页的UI以及一点波纹按钮特效的书写心得

---

效果展示：

chickUI-video

---

主要的特效实现在于背景图与按钮，下方放css代码

.content {
    height: 100vh;
    overflow: hidden;
    background-image:
        radial-gradient(closest-side,rgba(235,105,78,1),rgba(235,105,78,0)),
        radial-gradient(closest-side,rgba(243,11,64,1),rgba(243,11,64,0)),
        radial-gradient(closest-side,rgba(254,234,131,1),rgba(254,234,131,0)),
        radial-gradient(closest-side,rgba(170,142,245,1),rgba(170,142,245,0)),
        radial-gradient(closest-side,rgba(248,190,147,1),rgba(248,190,147,0));
    background-size:
        600rpx 600rpx,
        800rpx 800rpx,
        700rpx 700rpx,
        700rpx 700rpx,
        900rpx 900rpx;
    background-repeat: no-repeat;
    animation: movement 8s linear infinite;
}

@keyframes movement {
    0% {
        background-position:
        400rpx -50rpx,
        500rpx 300rpx,
        -250rpx 600rpx,
        200rpx 700rpx,
        -300rpx 0rpx;
    }
    25% {
        background-position:
        300rpx 100rpx,
        350rpx 400rpx,
        -50rpx 700rpx,
        100rpx 900rpx,
        -200rpx -100rpx;
    }
    50% {
        background-position:
        200rpx 150rpx,
        500rpx 600rpx,
        0rpx 500rpx,
        200rpx 700rpx,
        0rpx -150rpx;
    }
    75% {
        background-position:
        300rpx 100rpx,
        800rpx 300rpx,
        -100rpx 750rpx,
        300rpx 500rpx,
        -150rpx -50rpx;
    }
    100% {
        background-position:
        400rpx -50rpx,
        500rpx 300rpx,
        -250rpx 600rpx,
        200rpx 700rpx,
        -300rpx 0rpx;
    }
}

 content是标签盒子主体，背景图片设置为五个扩散的圆形，再添加移动动画即可

接下来的就是波纹按钮

波纹按钮是点击添加span元素，span元素绑定了一个放大的动画，等到动画结束时就将span标签移除，即可达到效果。

本项目用的技术时uniapp，没有找到如何动态添加标签，希望有大佬能指出一下。所以变换了一个思路，将直接添加span标签改为添加标签数组，通过v-for渲染数组中的标签，增删标签逻辑改为数组的增删，也能达到同样的效果。代码如下：

····html····

<view class="wave-main">
	<button class="wave-btn" @click="onLogin" ref="logRef">Login In
		<span v-for="(item,idx) in logSpanList" :key="idx" 
            :style="{ top: item.y + 'px', left: item.x + 'px' }">
        </span>
	</button>
	<button class="wave-btn" @click="onSign">Sign Up
		<span v-for="(item,idx) in signSpanList" :key="idx" 
            :style="{top: item.y + 'px', left: item.x + 'px'}">
        </span>
	</button>
</view>

····数据与方法···· 

data() {
	return {
		logSpanList: [],
		signSpanList: []
	}
}

methods: {
			onLogin(e) {
				this.addWave(e,this.logSpanList)
			},
			onSign(e) {
				this.addWave(e,this.signSpanList)
			},
			addWave(e, list) {
				let waveX = e.detail.x - e.currentTarget.offsetLeft
				let waveY = e.detail.y - e.currentTarget.offsetTop
				setTimeout(() => {
					list.shift()
				},800)
				list.push({
					x: waveX,
					y: waveY
				})
			},
		}

总结：变换思路实现效果