这个网站的CSS样式表使用了@keyframes pulsate
, 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
等属性。
其中@keyframes pulsate{...}
定义了一个动画效果,当透明度从0%变化到50%
时,透明度降低到0.2;而#spotlight{...}
则是一个固定定位的遮罩层,它的位置是固定在页面上的,高度和宽度都是100%,并且它的透明度初始值是0,然后通过过渡效果慢慢变为1,最后透明度恢复为0。
#spotlight.show{...}
表示如果遮罩层被显示(即透明度变为1),则过渡效果被移除,而#spotlight.white{...}
则是设置遮罩层的背景颜色为白色。
这个网站使用了一些CSS技巧来实现动态的视觉效果,同时保持了元素的基本可读性和功能性。