仅使用两个 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);
} 

总结

我们就使用了两个属性来完成了我们的玻璃效果，你也赶紧去试试吧。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享