该网站使用了CSS的伪类选择器和过渡效果来创建一个具有动态效果的网页布局。具体来说,它包括以下元素:
.hy-target
:用于定义目标元素的样式规则,设置为overflow:hidden
,即内容溢出时隐藏。.hy-relative
:定义相对定位元素的样式规则,设置为position:relative
,即相对于其正常位置进行定位。.hy-wrapper
:定义包装容器的样式规则,设置为overflow:hidden; position:absolute; top:0; left:0; height:100%
,即包裹所有内容,绝对定位在页面顶部左侧,并占据整个页面高度。.hy-wrapper *
:定义包装容器内所有子元素的样式规则,设置为box-sizing:border-box
,即边框盒模型,使子元素的宽度和高度包括内容、内边距和边框。.hy-fade .hy-box
:定义渐变透明效果的样式规则,设置为position:absolute; width:100%; height:100%; top:0; left:0; opacity:0;
。其中,.hy-fade
是一个类选择器,表示应用该类样式规则的元素,.hy-box
是另一个类选择器。通过设置opacity:0;
,初始状态时元素不可见。.hy-box.hy-fade-show
:定义渐变透明效果显示后的样式规则,设置为opacity:值(如1)
,使元素可见。这里使用了类选择器和伪类选择器结合的方式,以便根据条件切换不同的样式。
该网站使用CSS的伪类选择器和过渡效果实现了一种渐变透明的效果,可以用于展示内容或触发动画效果。