功夫码

CSS实现内容渐变隐藏效果代码

晓峰 时间:2023-05-23 15:41:03 阅读:31
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

css实现内容渐变隐藏效果代码

.box{
    height:500px;
    width:500px;
    position:relative;// 这个非常重要
}
 
.mask {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
    background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
    background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
    background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
}

html代码

<div class="box">
    <div class="content">
    我是功夫码的示例文字,我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字
    <div>
    /*遮罩层 */
    <div class="mask"></div>
</div>

image.png

--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部