网站介绍

这个网站是一个响应式的网页设计，主要使用了CSS3的动画特效。它的主要特点是创建了一个焦点图效果(spotlight)。当用户滚动页面时，焦点图会在顶部固定的位置出现，并在底部消失。焦点图的颜色是黑色，背景色是白色，文字颜色是白色且带有一些阴影。这个网站还包含一个名为”pulsate”的关键帧动画，用于使焦点图产生心跳效果。同时，它还支持触摸屏操作和禁用了文本选择器。

代码分析

  1. @keyframes pulsate{0%,to{opacity:1}50%{opacity:.2}}:这一部分定义了一个名为“pulsate”的关键帧动画。在这个动画中，元素的初始透明度为1,达到中间值时(50%)透明度变为0.2。这个动画可以用于实现焦点图的闪烁效果。

  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}:这是定义焦点图样式的部分。它设置了焦点图的定位、尺寸、颜色、背景色、透明度等属性。此外，还设置了过渡效果，防止焦点图突然改变导致的闪烁问题。

  3. #spotlight.show{opacity:1;transition:none;pointer-events:auto}:这是一个类选择器，当元素具有”show”类时，它的透明度变为1,并允许用户进行交互。

  4. #spotlight.white{color:#212529;background-color:#fff}:这是另一个类选择器，用于设置焦点图的文字颜色和背景色。