文章点击加载更多按钮

点击加载阅读原文按钮，之前网上找了很多教程，下面是整理的一个比较方便设置的方法。只需要在文章结尾加上input标签，修改css即可。

//获取文章
<input type="checkbox" id="contTab" checked="checked" class="tabbed">
<div id="cont">这是前端开发博客的正文</div>
<div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore">点击展开全文</label></div>
//以下是css设置
/阅读全文/
#contTab{
display: none;
}
.content-more{
display: none;
}
#contTab:checked ~ #cont{
max-height: 600px;
overflow: hidden;
}
#contTab:checked ~  .content-more{
display: block;
position: relative;
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
#contTab:checked ~  .content-more .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: 80px;
position: absolute;
left: 0;
top: -79px;
width: 100%;
}
#contTab:checked ~  .content-more .readmore{
display: inline-block;
background: #0067cb;
color: #fff;
width: 175px;
height: 42px;
border-radius: 42px;
line-height: 42px;
font-size: 16px;
cursor: pointer;
}