html代码：文章默认隐藏点击展开

温馨提示：手机扫码可阅读当前文章!
文章简介：现在很多网站都采用了一种效果，就是在展示长篇文章时，只显示部分内容，并在底部加上一个“展开”按钮，点击后可以展示全部内容。这种效果可以很好地提高用户体验和阅读效果。下面我将介绍一种制作这种效果的方法。第一步是创建点击按钮的HTML代码：&l...

现在很多网站都采用了一种效果，就是在展示长篇文章时，只显示部分内容，并在底部加上一个“展开”按钮，点击后可以展示全部内容。这种效果可以很好地提高用户体验和阅读效果。下面我将介绍一种制作这种效果的方法。

第一步是创建点击按钮的HTML代码：

<div class="LookMore">展开全部</div>

第二步是设置点击按钮的样式：

.LookMore {
    width: 140px;
    margin: 20px auto;
    height: 34px;
    line-height: 32px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #c7d1d6;
    background-color: #eee;
    color: #4dba50;
}

第三步是制作渐隐效果，原理是使用一个遮罩层并设置透明度：

<div class="gradient"></div>

第四步是设置遮罩层的样式：

.gradient {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(#fff));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
    background-image: linear-gradient(-180deg, rgba(255,255,255,0), #fff);
    height: 140px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

第五步是通过JavaScript代码实现点击展开全部内容的效果：

$(".LookMore").click(function() {
    $(".xwz-con-buzou").css("height", "auto");
    $(".LookMore, .gradient").css("display", "none");
});

通过以上几个步骤，你就可以在自己的网站上实现文章渐隐和点击展开按钮的效果了。