网站介绍
这个网站是一个具有响应式设计的网页，使用了HTML、CSS和JavaScript技术。它的主要特点是通过使用伪元素和过渡效果来实现动画效果，以及利用相对定位和绝对定位来布局页面元素。
HTML结构
网站的HTML结构主要包括一个包裹整个页面的容器(.hy-wrapper),以及一些内部元素(如.hy-box)。容器使用了绝对定位，并设置了高度为100%。内部元素则使用了相对定位，并根据需要进行动画处理。
CSS样式
为了实现动画效果，该网站使用了CSS的伪元素和过渡效果。在.hy-target类中，我们设置了overflow:hidden,以确保超出容器的内容被隐藏。.hy-relative类则将元素设置为相对定位，以便于后续的布局操作。.hy-wrapper类则将容器的位置设置为绝对定位，并将其高度设置为100%,以确保内容能够覆盖整个容器。同时，我们还对所有的元素应用了box-sizing:border-box,以确保边框和内边距不会影响元素的实际尺寸。
在.hy-fade类中，我们定义了一个渐变透明度的动画效果。.hy-box元素的position属性被设置为绝对定位，宽度和高度都为100%,并且默认的透明度为0。通过使用CSS的过渡属性(transition-property、transition-timing-function)和JavaScript代码，可以触发透明度的变化并实现平滑的过渡效果。
.hy-box.hy-fade-show类用于显示已经完成动画处理的元素，它的透明度会逐渐增加到1,从而实现了淡入的效果。
以上是关于该网站的基本介绍。由于篇幅有限，无法详细介绍每个具体的HTML和CSS代码块的功能和作用。但通过阅读代码和理解其结构，你可以进一步了解该网站的工作原理和实现方式。
