这个网站是一个小米隐私页面。页面加载时会显示一个全屏的黑色背景,上面有一个透明度逐渐增加的进度条。
在页面的顶部,有一个固定位置的<div>
元素,使用CSS样式设置为不可见(pointer-events: none;
),并具有9999的层叠顺序(z-index: 9999;
)。该元素用于遮挡页面其他内容,确保只有加载动画可见。
在#loader
元素内部,还定义了一个绝对定位的<video>
元素,命名为#loaderVideo
,用于显示加载动画。通过设置其宽度和高度为自适应,并且居中对齐,可以使其在屏幕中央显示。
接下来是关键帧动画的定义。在名为delayShow
的关键帧动画中,使用了从0%到100%的时间范围,将#loaderVideo
元素的透明度从完全透明渐变到完全不透明。这将创建一个淡入效果。
在页面的中间位置,有一个宽度为92像素、高度为8像素的矩形元素,命名为#progressBox
。该元素具有一个半透明的黑色背景,并具有圆角半径为5像素。通过设置其位置为距离页面顶部62%的位置(top: 62%;
)和水平居中对齐(left: 50%;
),可以将进度条放置在页面中心。
使用CSS属性transform: translateX(-50%);
将进度条水平向左平移50%,以保持水平居中对齐。
这个小米隐私页面使用了一些CSS样式来实现加载动画效果和进度条显示。