CSS样式实现显示和隐藏特效功能详解

139次阅读

共计 1191 个字符，预计需要花费 3 分钟才能阅读完成。

CSS 样式实现显示和隐藏特效功能详解

1. 前言

CSS 是前端开发中的一种样式表语言，可以用来控制网页的样式。今天介绍一下 CSS 样式如何实现隐藏（收起）和显示（展示）特效功能，可以使网页内容更加简洁易读，也更符合用户的操作习惯。而 CSS 可以通过伪类和动画来实现这种效果。

2. HTML 编写

在 HTML 中添加隐藏和显示按钮，可以使用 div 标签来实现。

<html>
    <body>
        <div class="box">
            <div class="sx" onclick="typeClick()"> 展示 / 收起 </div>
            <div id="type_hs" class="zt">
                <div class="pz">
                    <div class="wz"> 字体大小 </div>
                    <div class="input-btn">
                        <span>-</span>
                        <input type="text" id="inpV" readonly="readonly" :value="fontZ">
                        <span>+</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

接下来，利用 CSS 来设置展开和收起的效果了。

3. CSS 编写

.box .zt{
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease;
}
.box .cont {
    max-height: 300px;
}

上面的代码中，先将 css 中 zt 样式的 max-height 设置为 0px，overflow 设置为 hidden，这样展开的内容就不会显示。然后设置一个动画效果，transition 属性控制了动画的过渡效果；而 css 中 cont 样式设置为 300px。

4. JS 编写

function typeClick(){
  let dy = document.getElementById("type_hs").getAttribute("class");
  if(dy == 'zt'){
    document.getElementById("type_hs").setAttribute("class","zt cont");
  }else{
    document.getElementById("type_hs").setAttribute("class","zt");
  }
}