网站介绍

这是一个使用CSS3动画效果制作的网页特效。通过使用@keyframes规则，我们创建了一个名为pulsate的关键帧动画，使元素在不同时间点产生不同的透明度变化。然后，我们在页面上的一个固定位置添加了一个ID为spotlight的元素，并应用了该动画效果。

@keyframes pulsate

这个关键帧动画定义了pulsate动画的两个状态：0%和100%,以及50%的时间点。在0%到50%的时间内，元素的透明度从完全不透明(opacity: 1)逐渐变为半透明(opacity: .2)。这样就实现了元素的闪烁效果。

#spotlight 类样式

#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;,设置过渡时间为0.2秒，淡出效果。
  • 字体属性：font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; contain: strict; touch-action: none; pointer-events: none;,设置字体类型、大小、粗细等属性。

#spotlight.show 类样式

当.show类应用于#spotlight元素时，它会改变以下样式：

  • 不使用过渡动画效果：transition: none;,取消过渡动画效果。
  • 允许用户选择文字：pointer-events: auto;,允许用户选择文字。