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

html 复制代码
<view class="bg-decoration">
   <view class="circle-1"></view>
   <view class="circle-2"></view>
   <view class="circle-3"></view>
</view>
css 复制代码
/* 背景装饰 */

.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;
	}
相关推荐
焦糖玛奇朵婷27 分钟前
盲盒小程序开发|解锁开箱新体验[特殊字符]
大数据·开发语言·程序人生·小程序·软件需求
左师佑图1 小时前
微信小程序组件事件冒泡问题排查与解决方案
微信小程序·小程序
HWL56792 小时前
uni-app的生命周期
前端·vue.js·uni-app
一颗小青松2 小时前
uniapp设置安卓 ios 自定义启动页
uni-app
仙古.梦回~2 小时前
uniapp中使用plus对象实现经典蓝牙
uni-app
树下水月2 小时前
微信小程序接口,必须使用https的443端口吗?
微信小程序·小程序·https
毕设源码-邱学长2 小时前
【开题答辩全过程】以 灵山水牛奶配送小程序的设计与实现为例,包含答辩的问题和答案
小程序
2501_915918412 小时前
基于Mach-O文件的动态库与静态库归属方案及API扫描实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 小时前
iOS 证书无法跨电脑使用?签名迁移方法一文讲透
android·ios·小程序·https·uni-app·iphone·webview
毕设源码-赖学姐3 小时前
【开题答辩全过程】以 基于springboot的酒店预订小程序自动化订制系统为例,包含答辩的问题和答案
运维·小程序·自动化