我正在参与「启航方案」
创立布景
布景的话是在网上找的一个突变布景。
咱们先创立一个html文件然后给个div给个类名
<div class="container">
</div>
然后咱们把以下款式增加上去
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: #ff00cc;
background: -webkit-linear-gradient(
to right,
#333399,
#ff00cc
);
background: linear-gradient(
to right,
#333399,
#ff00cc
);
}
咱们保证容器占据整个屏幕。咱们将容器内的内容对齐到中心。
linear-gradient咱们还运用该特点将突变增加到布景中。
-webkit-linear-gradient用于某些浏览器。假如浏览器不支撑突变，咱们会供给默许色彩。
线性梯度
linear-gradient 特点承受一个方向和一个色彩列表。能够运用to关键字指定方向。色彩是运用rgborrgba函数指定的。该rgb函数承受赤色、绿色和蓝色的三个值。该rgba函数选用附加值 alpha。alpha 值指定色彩的不透明度。alpha 值可所以 0 到 1 之间的任何值。0 表明色彩彻底透明，1 表明彻底不透明。
增加圆圈
咱们运用 class和创立两个div元素。circle1``circle2
<div class="circle1"></div>
<div class="circle2"></div>
咱们将以下款式增加到圆圈中。
.circle1,
.circle2 {
background: white;
background: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.1)
);
height: 20rem;
width: 20rem;
position: absolute;
border-radius: 50%;
}
圆圈的高度和宽度为 20rem。咱们给它们一个绝对方位，以便它们能够相对于容器定位。咱们给它们一个 50% 的边界半径，这样它们就变成了圆形。
咱们为圆圈的布景增加了一个线性突变。假如浏览器不支撑突变，咱们给圆圈一个默许色彩。
定位圆圈
为了定位圆圈，咱们将以下款式增加到圆圈中。
.circle1 {
top: 10%;
left: 15%;
transform: translate(-10%, -10%);
}
.circle2 {
top: 70%;
left: 80%;
transform: translate(-50%, -50%);
}
咱们给第一个圆圈的顶部值为 10%，左边值为 10%。它将圆圈从顶部移动 10%，从左边移动 10%。然后咱们运用该transform特点将圆在 x 和 y 方向上平移 -10%。这样做是为了使圆圈相对于容器的左上角定位。
第二个圆圈也做了相似的工作。
增加玻璃卡
咱们在容器中创立一个div带有类的元素。glass-card咱们将以下款式增加到玻璃卡中。
.glass-card {
background: white;
background: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.2)
);
backdrop-filter: blur(1rem);
width: 60%;
height: 60%;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
他们在这里…. 用于创立玻璃作用的两个特点。
linear-gradientbackdrop-filter
线性突变创立一个半透明的白色布景。
linear-gradient() 函数用于创立一个表明两种或多种色彩线性突变的图片。
创立一个线性突变，需求指定两种色彩，还能够实现不同方向（指定为一个角度）的突变作用，假如不指定方向，默许从上到下突变。
该backdrop-filter特点用于将含糊和饱和度等图形作用应用于元素的布景。大多数现代浏览器都支撑它。Internet Explorer 不支撑它。
咱们增加了一个含糊作用，其值能够根据需求更改。
为了保证圆圈在玻璃后面，咱们增加了z-index将卡片移动到圆圈上方的特点。
增加内容
咱们在玻璃卡片上增加一个简略的标题吧。
<h1>Hello World</h1>
咱们为标题增加了一些款式这样看起来会更加的完美。
.glass-card h1 {
font-size: 5rem;
color: white;
text-align: center;
font-weight: 700;
letter-spacing: 0.5rem;
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
总结
咱们就运用了两个特点来完成了咱们的玻璃作用，你也赶紧去试试吧。
