好看的背景颜色 uniapp+小程序

原创已于 2025-09-05 12:42:59 修改 · 268 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小游戏 #小程序 #uniapp #uni-app

于 2025-09-05 11:06:12 首次发布

uni-app 同时被 2 个专栏收录

33 篇文章

订阅专栏

微信小程序

28 篇文章

订阅专栏

<view class="bg-decoration">
   <view class="circle-1"></view>
   <view class="circle-2"></view>
   <view class="circle-3"></view>
</view>

/* 背景装饰 */

.container{
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
	

.bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
	}

	.circle-1,
	.circle-2,
	.circle-3 {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.circle-1 {
		width: 200rpx;
		height: 200rpx;
		top: -100rpx;
		right: -50rpx;
	}

	.circle-2 {
		width: 150rpx;
		height: 150rpx;
		bottom: 200rpx;
		left: -50rpx;
	}

	.circle-3 {
		width: 100rpx;
		height: 100rpx;
		bottom: 100rpx;
		right: 100rpx;
	}