介绍网站

这个网站是一个使用CSS3动画效果的演示网站。它展示了如何使用@keyframes和transition属性实现动画效果，包括元素的淡入淡出、变形、位置改变等。

@keyframes

@keyframes是CSS3中用于定义动画的关键帧的规则。通过指定不同的时间点和对应的样式值，可以创建各种动态效果。在示例中，我们定义了一个名为pulsate的关键帧动画，通过改变透明度来模拟心跳的效果。

@keyframes pulsate {
0%, to {
opacity: 1;
}
50% {
opacity: 0.2;
}
}

#spotlight类

#spotlight是一个定位固定的容器，用于显示动画内容。它具有以下样式属性：

  • position: fixed;:将元素固定在视口中的特定位置，通常为屏幕中央。
  • top: -1px; bottom: -1px;:设置元素的上、下边框宽度为1像素，使其充满整个视口高度。
  • width: 100%; z-index: 99999;:设置容器宽度为100%,并将其置于所有其他元素之上。
  • color: #fff; background-color: #000;:设置容器的文字颜色为白色(#fff),背景颜色为黑色(#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;:定义容器内文本渐变时的过渡效果，以及字体相关的属性。

#spotlight.show类和.white类

.show和.white都是为容器添加额外的样式类，用于控制动画效果的不同部分。.show类使容器在动画开始时立即显示，并禁用过渡效果。.white类则将容器的文字颜色改为白色(#212529),以适应不同的背景色。

<div id="spotlight" class="show white">Hello, World!</div>

通过以上代码，当页面加载完成后，会看到一个居中的容器，内部文字为”Hello, World!“,文字颜色为白色，动画效果为心跳式的淡入淡出。