css实现毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

Smile_ping

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量757

点赞数 2

分类专栏： css uniapp 文章标签： css backdrop-filter linear-gradient radial-gradient

本文链接：https://blog.csdn.net/Smile_ping/article/details/128127224

版权

uniapp 同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

毛玻璃效果

文章目录

- 毛玻璃效果

效果图

在这里插入图片描述

基本属性：

毛玻璃使用backdrop-filter属性调整背景滤镜效果
linear-gradient设置线性渐变
radial-gradient设置径向渐变

template

<template>
	<view class="cardWrap">
		<view class="sun"></view>
		<view class="card">
			<view class="h1">Lucky Card</view>
			<view class="h2">6228 8888 9999 5209</view>
			<view class="h3">A Lucky Bank.</view>
			<view class="h4">05 / 20</view>
		</view>
		<view class="circle"></view>
		<view class="rect"></view>
	</view>
</template>

css

<style lang="scss" scoped>
	.cardWrap {
		height: 100vh;
		background: radial-gradient(
		  circle at 20px 20px,
		  rgba(248, 255, 174, 0.8),
		  transparent 25%
		),
		radial-gradient(
		  circle at 60% 90%,
		  rgba(253, 200, 48, 1),
		  transparent 60%
		),
		#2980B9;
	}
	
	.h1 {
		padding: 100rpx 0 150rpx;
	}
	
	.sun {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 60rpx;
		left: 35%;
		border-radius: 50%;
		box-shadow: -12px 0px 0 rgba(220, 238, 220, 0.7);
		transform: translateX(-50%) rotate(210deg);
	}
	
	.card {
		position: absolute;
		right: 70rpx;
		bottom: 225rpx;
		z-index: 10;
		width: 350rpx;
		height: 650rpx;
		text-align: center;
		border-radius: 20rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.4);
		border-width: 0 0 1rpx 1rpx;
		backdrop-filter: blur(10rpx);
		box-shadow: 20rpx -20rpx 40rpx rgba(0, 0, 0, 0.2), -20rpx 20rpx 40rpx rgba(255, 255, 255, 0.1);
		background: linear-gradient(to top right, rgba(198, 255, 221, 0.6), rgba(251, 215, 134, 0.8), rgba(247,121,125, 1));
		transform: rotate(-12deg);
		transform-origin: bottom;
		view {
			color: rgba(255, 255, 255, 0.8);
		}
	}
	
	.circle {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 45%;
		transform: translateX(-50%);
		bottom: 100rpx;
		border-radius: 50%;
		background: linear-gradient(to top left, rgb(18, 194, 233), rgb(196, 113, 237), rgb(247, 121, 125));
	}
	
	.rect {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		right: 40rpx;
		bottom: 710rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom left, rgba(18, 194, 233, 0.9), rgba(196, 113, 237, 0.9), rgba(75, 162, 237, 0.9));
	}
</style>