css 显隐效果 |css3流畅的光线滑过的效果

/* 元素显隐 */
.hide{
display:none;
}
.show{
display:block;
}

以上代码将.hide类的元素隐藏，让.show类的元素显示。如果想要切换显隐状态，可以使用jQuery等JavaScript库。

/* 鼠标悬浮 */
.hover-show{
display:none;
}
.hover:not(:hover) .hover-show{
display:block;
}

当鼠标悬浮在.hover元素上时，.hover-show元素显示；当鼠标离开.hover元素时，.hover-show元素隐藏。

/* CSS3过渡动画 */
.transition{
height:0;
overflow:hidden;
transition:height 0.3s;
}
.transition:hover{
height:100px;
}

以上代码制作了一个过渡动画效果，.transition元素默认隐藏，当鼠标悬浮在该元素上时，高度从0过渡到100像素，实现显隐效果，而且还带有动画。

总之，CSS显隐效果具有简单、快捷、易用等优点，能够为网页设计带来更多的惊喜和交互效果。