该网站使用了CSS的伪类选择器和过渡效果来创建一个具有动态效果的网页布局。具体来说,它包括以下元素:

  1. .hy-target:用于定义目标元素的样式规则,设置为overflow:hidden,即内容溢出时隐藏。

  2. .hy-relative:定义相对定位元素的样式规则,设置为position:relative,即相对于其正常位置进行定位。

  3. .hy-wrapper:定义包装容器的样式规则,设置为overflow:hidden; position:absolute; top:0; left:0; height:100%,即包裹所有内容,绝对定位在页面顶部左侧,并占据整个页面高度。

  4. .hy-wrapper *:定义包装容器内所有子元素的样式规则,设置为box-sizing:border-box,即边框盒模型,使子元素的宽度和高度包括内容、内边距和边框。

  5. .hy-fade .hy-box:定义渐变透明效果的样式规则,设置为position:absolute; width:100%; height:100%; top:0; left:0; opacity:0;。其中,.hy-fade是一个类选择器,表示应用该类样式规则的元素,.hy-box是另一个类选择器。通过设置opacity:0;,初始状态时元素不可见。

  6. .hy-box.hy-fade-show:定义渐变透明效果显示后的样式规则,设置为opacity:值(如1),使元素可见。这里使用了类选择器和伪类选择器结合的方式,以便根据条件切换不同的样式。

该网站使用CSS的伪类选择器和过渡效果实现了一种渐变透明的效果,可以用于展示内容或触发动画效果。