文字收缩下面半透明效果
生活随笔
收集整理的這篇文章主要介紹了
文字收缩下面半透明效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
廢話不多說，直接看效果圖~
實現的思路：
文字收縮的時候，給它下面添加一個漸變的遮罩層，當展開的時候，把那個遮罩層給去掉。
主要代碼：
<!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>總結
以上是生活随笔為你收集整理的文字收缩下面半透明效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql event 学习
- 下一篇： spring解决ajax跨域问题