CSS如何实现文章展开阅读全文的效果?
很多网站都有这样的功能?
我也不知道为什么需要这个功能,展开阅读。先是只能见一部分。
如果说要收费的,那可以理解,展开阅读需要收费,但是仅是css实现这种隐藏,没用,直接修改一个样式即可看到全部内容,所以展开全文收费,不是。
如果说为了方便用户快速滚动到底部评论而损失一次点击交互,那也是没必要的,可以在侧边做一个滚动到评论区的即可,比如阳光沙滩这样
点击评论,然后就滚动到评论区域啦。
所以,也没必要让用户马上滚动到评论区,再说了,没有看文章就评论,这是啥玩意呢?
那有那些是可取的呢?
比如说今天 我就用到了,我用来干什么呢?我希望点击阅读全文的时候跳转到阳光沙滩这里来。 那还有什么用处呢?
我能想到的就是提示用户登录啦,如果你想阅读全文,那么希望你注册,登录一下。
这个渲染的时候可以根据用户登录情况来渲染,如果已经登录了,默认展开全文。这样子或许可以增加网站的注册数量。
效果
实现思路
- 限制内容高度
- 展开阅读的字样父容器绝对布局,于内容的底部
- 文字于父容器的底部
- 文字父容器高度大一点,设置背景为线性渐变,从白色到透明。
这样子基本就可以实现了。
如果有相关的动作,给文字设置链接,或者设置点击事件,实现相关的功能即可。
代码
background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 1));
背景渐变
.content-box {
position: relative;
}
.read-origin a {
color: #0084ff;
font-weight: 600;
font-size: 16px;
cursor: pointer;
position: absolute;
bottom: 0;
padding-top: 30px;
}
.read-origin {
background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 1));
text-align: center;
width: 815px;
height: 400px;
position: absolute;
bottom: 0;
}
写法不唯一,但是按前面的思想来即可时下这样的功能。