网站介绍
这是一个使用CSS3动画创建的响应式焦点灯效果的演示网站。这个网站的主要目的是展示如何利用CSS的关键帧动画(@keyframes)和过渡效果(@transition)来创建视觉上的动态效果。
页面布局
这个网站使用了固定定位(position: fixed)的方式来实现焦点灯效果，它的位置是相对于浏览器窗口的。这意味着无论用户滚动到页面的哪个位置，焦点灯都会保持在屏幕的中心位置。同时，通过设置z-index: 99999,确保了其他所有元素都在焦点灯之下，从而使焦点灯始终位于最上层。
焦点灯的样式定义在一个ID为spotlight的div元素中。该元素的初始状态是透明度(opacity)为0,并且不可见(display: none)。当鼠标悬停在这个元素上时，会触发.show类，使焦点灯变为可见，并改变其透明度以产生心跳效果。
还有一个.white类可以用于改变焦点灯的颜色和背景颜色。
代码示例
这里展示了部分关键帧动画的CSS代码，用于实现上述描述的效果：
@keyframes pulsate {
0%, to {
opacity: 1;
}
50% {
opacity: 0.2;
}
}
以上代码定义了一个名为”pulsate”的动画，其中包含了三个关键帧：起始(0%)、结束(100%)以及中间(50%)。在起始和结束阶段，元素的透明度为1,表示完全可见；而在中间阶段，元素的透明度为0.2,表示半透明。这样就实现了元素的淡入淡出效果。
