仅使用两个 CSS 属性创建玻璃效果

我正在参与「启航方案」

创立布景

布景的话是在网上找的一个突变布景。

咱们先创立一个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-gradient
• backdrop-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);
}

总结

咱们就运用了两个特点来完成了咱们的玻璃作用，你也赶紧去试试吧。