根据提供的素材,这个网站是一个名为 “spotlight” 的元素。它使用了一个名为 @keyframes pulsate
的动画样式规则来定义元素的动画效果。当元素显示时,它会以100%的透明度显示,并在50%时降低透明度到20%。
CSS代码如下:
@keyframes pulsate {
0%, to {
opacity: 1;
}
50% {
opacity: .2;
}
}
#spotlight {
position: fixed;
top: -1px;
bottom: -1px;
width: 100%;
z-index: 99999;
color: #fff;
background-color: #000;
opacity: 0;
overflow: hidden;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
transition: opacity .2s ease-out;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
contain: strict;
touch-action: none;
pointer-events: none;
}
#spotlight.show {
opacity: 1;
transition: none;
pointer-events: auto;
}
#spotlight.white {
color: #212529;
background-color: #fff;
}
这个网站的目的是为了在网页上展示一个固定位置的元素(spotlight),并为其添加一些基本的样式和动画效果。