当你做网页设计想让某些内容魔法般地隐藏或显示出来，CSS就能起到重要作用！这根能变戏法儿的神奇道具可以帮你做到这些。现在我要教大家如何运用CSS让DIV蒙上面纱或者露出真容，以此提升你的网站吸引力。
使用Display属性
咱们来说说那个叫Display属性的东东，这个功能强大，可以自由调节元素的出现状态。想要某个元素消失？简单，加上个`display:none;`就搞定了！要是想让它霸屏占据一整行，那就给它加点料，变成`display:block;`！
嘞，别忘了，用这个Display属性还有个小麻烦，就是如果把元素隐藏掉的话，那它可就不给页面留空地儿了，搞得本来属于它的地方给别人抢去，会让页面乱七八糟的哈。
利用Visibility属性
这是一个被隐藏的元素
跟你们说一下那个啥叫“visibility”的玩意儿。这个功能是让元素变得隐身，就好像穿了件无形的外衣似的。比如说你想把一块’Div’给隐藏掉，不用担心，直接设成’visibility:hidden;’就行。虽然我们眼睛看不见它，但是它还是会乖乖待在那儿，不会影响到整个页面的布局！
这是一个显示为块级元素的元素
你用`visibility:hidden;`这个属性就能让它隐形，和消失了没两样！既不破坏整个网页的排版，其他东西也不受影响。但别忘了，虽然看不见，那些被藏起来的元素还是占据着原本的地盘，可能会影响到周围的东西。
控制Opacity属性
我们来聊聊opacity属性，它可以让你想让什么东西透明就让什么东西透明。比方说，一个div的透明度调成0就是完全消失在视线中；而调成1？那就和原來一摸一樣！
这个方法超厉害的！就是不用改变网页整体结构，也能控制各种元素出现和隐藏。告诉你个小秘密，调整一下透明度值，就能制造出逐渐消失或出现的特效，看起来特别顺畅！
这是一个被隐藏的元素
玩转CSS3动画
哈喽，来说说CSS3动画，这就像是把元素隐藏或者显露出来的魔法招式！我们可以用这个`@keyframes`给元素穿上一件神奇的变色衣，让它的透明度时有时无，或者一下子完全透明，一下子又恢复原样。
接着，在这儿元素样式表中，我们得添加个animation的说法，比如’.show’这种，然后把你要的动画名字和时间告诉它。这样的话，就可以通过调整这个类的数量来隐藏或显示元素了，甚至还能做出一些炫酷的效果，像是让元素旋转呀、变大变小等等！
实战应用：登录框的隐藏与显示
那就说个好玩的事情给你听，比如我们现在要用到一个登陆框，但是希望大家能够看到这个框里面的各种细节变化，又不希望当关掉按钮时因为突然消失而吓到人家。这时候CSS3的动画特效就能派上用场！
这是一个半透明的元素
首先，咱要先弄个透明变不透明的动画效果，登陆窗口一开始是全透明然后加点儿动画类，这样一来，你一点登录，登录窗口就会慢慢变实；想退出的话，去掉这个类，动画反过来，登录窗口就会一点点消失咯~
注意事项与最佳实践
不要忘了用CSS来搞点“变戏法”，但是得小心，别搞砸了网站布局。把元素藏起来可能会让用户觉得丑兮兮的。注意，你的效果还需要在各种设备和浏览器上都能运行的流畅，否则用户就会感到不爽~
记住，咱们要用对方法，千万不要太闹腾了，免得出错影响大家使用。挑选最实用的那一种方案来打扮你的网页，好看又方便使用就这么简单！
总结与展望
@keyframes showDiv {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
这是一个被隐藏的元素
.show {
animation: showDiv 1s forwards;
}
看完这篇文章，了解到CSS真的很强大，可以帮我们随心所欲地展示或隐藏元素！只要咱们根据实际情况选择最合适的那一种方法，网页肯定会变得更加炫酷哒！
据说以后网页设计会变得特别好玩，隐藏和展现元素会有很多新鲜玩意儿。大家跟我学CSS呗，做出来的网页肯定牛气冲天！
亲们，来聊聊你们用网页设计的时候最喜欢什么隐藏或展示元素的技巧呀？赶紧留言分享咯~别忘了分享给朋友们看看，让他们见识一下CSS的魔力魅力！
var div = document.getElementsByClassName("show")[0];
div.classList.add("show");
评论0