好看的背景颜色 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;
	}
相关推荐
2501_916007478 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
Q_Q5110082858 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
性野喜悲9 小时前
uniapp+<script setup lang=“ts“>解析后端返回的图片流并将二维码展示在页面中
uni-app
卷Java10 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
笨笨狗吞噬者12 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_9160088914 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9151063214 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者814 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_9151063214 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
Roye_ack16 小时前
【项目实战 Day7】springboot + vue 苍穹外卖系统(微信小程序 + 微信登录模块 完结)
spring boot·redis·后端·小程序·个人开发·学习方法·苍穹外卖