文字收缩下面半透明效果

废话不多说，直接看效果图~

实现的思路：

文字收缩的时候，给它下面添加一个渐变的遮罩层，当展开的时候，把那个遮罩层给去掉。

主要代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>文本模糊</title><style type="text/css">body{color:#555;font-size:16px;line-height:1.7;word-wrap:break-word;font-family:'Microsoft Yahei';-webkit-tap-highlight-color:rgba(0,0,0,0)}.question-description{position:relative;max-height:5.1em;margin-top:5px;overflow:hidden;width:370px}.question-description.is-expanded{max-height:none}.question-mask{position:absolute;top:0;width:100%;height:100%;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.5),#fff);background-image:linear-gradient(180deg,hsla(0,0%,100%,.5),#fff)}//主要的样式代码.expandBtn{position:absolute;right:0;bottom:0;padding:4px 0 0 5px;color:#999;background-color:#fff;cursor:pointer;line-height:1.5;border-radius:4px;border:0 none;font-size:16px}</style>
</head>
<body><div class="question-description"><div class="rich-text">比如：吃喝拉撒睡怎么照顾、怎么逗它比较好、上班的话猫猫在家怎么办、怎么训练、卫生健康上有什么要注意的、要不要打疫苗、什么时候打、养猫需要怎样的心态。。。。。新手求经验，养过猫猫的都来说点经验呗~</div><div class="question-mask"><button class="expandBtn">查看问题描述</button></div></div><script type="text/javascript">var oBtn = document.getElementsByClassName('expandBtn');var oContent = document.getElementsByClassName('question-description');var oMask = document.getElementsByClassName('question-mask');oBtn[0].onclick = function(){oContent[0].className = 'question-description is-expanded';oMask[0].parentNode.removeChild(oMask[0]);//去掉遮罩层}</script>
</body>
</html>

文字收缩下面半透明效果相关推荐

JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
CSS背景半透明效果
说到CSS的透明效果可以使用如下方式: 1. opacity属性设置:例如opacity:0.7,而低版本的IE浏览器不直接支持这个属性,但是可以使用滤镜filter:alpha(opacity:70 ...
css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css
如何用css实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容.不过如果你只需求 ...
原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
Eeic Meyer on CSS 之背景半透明效果
CSS 并不支持任何形式上的半透明的效果. 书上介绍了两种方法来达到半透明的效果. 第一种是利用"半屏(halfscreen)",是由Todd Fahrner 提出的. 原理上就是 ...
latex公式文字划掉的效果
当我们想要强调某公式是错误的时候,可以用线划掉,latex可以使用宏包实现这个效果,使用方法如下: \usepackage{cancel} \cancel{公式内容} 或 \bcancel{公式内容 ...
unity shader 入门全透明与半透明效果实现
片元函数的fixed4类型的返回值的第4位即为阿尔法值,0代表完全不显示(透明),1代表完全显示.中间的数值代表半透明.但只修改这个值是不能直接修改透明度的,因为还要对队列等进行修改. 本文介绍透明度 ...
Visual C++游戏编程基础之透明半透明效果
一.基本思路 1.半透明的原理一张位图由许多像素组成,而每一像素包含R.G.B三原色,三原色的值决定了像素的色彩,要实现半透明效果,需要把前景图和背景图彼此对应的像素颜色按某一比例进行调配, ...
php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...

文字收缩下面半透明效果

文字收缩下面半透明效果相关推荐

最新文章

热门文章