让你的ui更好看
🍣 Listen to me
为了避免后面的3D场景干扰UI,可以给UI背景添加高斯模糊(毛玻璃)弱化干扰。
🍖Demo
以下代码参考某个UP
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.a{
position: relative;
width: 400px;
height: 250px;
top: 150px;
z-index: 10;
}
.b{
position: absolute;
width: 400px;
height: 550px;
border-radius: 20px;
/* 设置渐变 */
background: linear-gradient(
to right bottom,
rgba(255,255,255,.6),
rgba(255,255,255,.3),
rgba(255,255,255,.2)
);
/* 重点:使元素背景模糊化 */
backdrop-filter: blur(11px);
/* 设置上高光和左高光,使其看起来更加逼真 */
border-top: 1px solid rgba(255,255,255,.8);
border-left: 1px solid rgba(255,255,255,.8);
}
.b span{
/* 设置文字的大小和粗细 */
font: 900 50px '';
position: absolute;
top: 10px;
left: 20px;
color: rgba(0,0,0,.5);
/* 设置文字阴影 */
text-shadow: 1px 1px 3px rgba(255,255,255,.7);
}
.b p{
font: 900 25px '';
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,.3);
/* 设置字体间距 */
letter-spacing: 3px;
}
/* 接下来设置两个球 */
.c{
width: 160px;
height: 160px;
border-radius: 50%;
background-color: rgb(240,160,0);
position: absolute;
top: 140px;
left: -40px;
z-index: -99;
}
.d{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #77fdd7;
position: absolute;
top: -50px;
left: 260px;
z-index: -99;
}
</style>
</head>
<body onResize="ChangeCanvas()">
<div class="a">
<div class="b">
<span>GOAT</span>
<P>2021_2_15/bilibili</P>
</div>
<div class="c"></div>
<div class="d"></div>
</div>
</body>
</html>