• 文字收缩下面半透明效果


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

    实现的思路:

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

    主要代码:

    <!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>
  • 相关阅读:
    AD19覆铜与边框间距设置方法
    PADS规则设计-对某一网络/元件单独设置规则
    uC/OSii之任务划分
    对于单片机工程.h头文件的管理
    如何知道单片机程序占了多少字节
    观念的水位
    心无旁骛,向死而生:WGDC2016给创企上的一堂课
    寻找地理可视化的引爆点
    测绘地理信息企业转型之惑
    为什么你找不到优秀的GISer?
  • 原文地址:https://www.cnblogs.com/sese/p/6392801.html
Copyright © 2020-2023  润新知