看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减少了滑动时间,用户体验很好,对整个页面有一个大概的预览,强迫症会感觉很爽。

具体怎么实现这个效果,分析一下:

可以看出来是一个渐变的效果,从上往下颜色变白,我们知道在css3中有两种渐变:线性(linear-gradient)和径向(radial-gradient),很明显这里属于线性渐变。

渐变这种效果其实是一个图片的样子,我们可以设置一张上下透明的背景图,定位在文字上,没有渐变之前可以用这种方法。css3有了渐变,我们可以直接使用,渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中,渐变相当于背景图片。

background-image: linear-gradient(str1,str2,str3);

渐变中共有三个参数,第一个数数表示线性渐变的方向,第二个和第三个参数分别是起点颜色和终点颜色。

办公资源网址导航 https://www.wode007.com

方案一:

HTML:

<body>
<div class="show_text">
<p>渐变这种效果其实是一个图片的样子,我们可以设置一张上下透明的背景图,定位在文字上,没有渐变之前可以用这种方法。css3有了渐变,我们可以直接使用,渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中,渐变相当于背景图片...</p>
</div>
<div class="mask"></div>
</body>

CSS:

<style>
body{
position: relative;
}
.show_text{
width: %;
margin: auto;
}
.mask{
width:%;
position: absolute;
top:;
height: %;
background-image: -webkit-linear-gradient(top, hsla(,%,%,), #fff);
background-image: -moz-linear-gradient(top, hsla(,%,%,), #fff);
background-image: -o-linear-gradient(top, hsla(,%,%,), #fff);
background-image: linear-gradient(top, hsla(,%,%,), #fff);
}
</style>

hsla(0,0%,100%,0) 也可以使用 rgba(255,255,255,0)代替;效果图:

方案二:

在几年前张大神的博客中也有类似的效果,他写的效果是对文字本身进行渐变,也是一种思路,借鉴过来使用,字体颜色为黑色,可以设置黑色到白色的上下渐变。

 p{
background-image: -webkit-gradient(linear, , bottom, from(rgb(, , )), to(rgb(, , )));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

后两种属性兼容性不是很好。视觉上差别不是特别大,推荐使用方案一。

后记:

在这个大前端时代,相比各种火热的前端框架,CSS虽简单,也是容易被忽略,想要对CSS有一个比较深的掌握也是需要下大功夫的。在追赶大潮趋势下,我们也要打好深厚的基础,js也是,万变不离其宗。

css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现的更多相关文章

  1. jQuery插件实例五:手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  2. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  3. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  4. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. 手机网页调试利器: Chrome

    新开发的网页需要在手机或是模拟机上运行测试, 可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页 ...

  6. php支付宝手机网页支付类实例

    <?php $alipayConfig = array( 'key' => 'xxxxx', //买卖安全校验码,用于签名的32位密钥 'transport' => 'https', ...

  7. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  8. HTML5 手机网页制作笔记

    http://top.css88.com/archives/546 http://www.w3cfuns.com/blog-5470280-5406828.html 最近在卓手机网页,第一次入手.把要 ...

  9. 手机网页,div内滚动条,以及div内部滚动条拉到底部之后触发事件

    var gao = document.documentElement.clientHeight; var headHeight = parseInt($('.yhead').css('height') ...

随机推荐

  1. Java实现运动员分组

    有N个人参加100米短跑比赛.跑道为8条.程序的任务是按照尽量使每组的人数相差最少的原则分组. 例如: N=8时,分成1组即可. N=9时,分成2组:一组5人,一组4人. N=25时,分4组:7.6. ...

  2. CVE-2020-0796漏洞复现(RCE)

    0x01 漏洞简介 2020年3月10日,微软在其官方SRC发布了CVE-2020-0796的安全公告(ADV200005,MicrosoftGuidance for Disabling SMBv3 ...

  3. Python学习之计算机基础

    计算机基础: (1)计算机俗称电脑,是现代用于高速计算的电子计算器,可以进行数值计算也可以进行逻辑计算,还有存储记忆功能.是能够按照程序运行,自动,高速处理海量数据的现代化智能 电子设备. (2)物理 ...

  4. zabbix 交换机端口显示端口描述

    ZABBIX 监控系统流量图显示端口描述   进入web 选择配置--主机 选择触发器原型 编辑触发器 随便点开一个触发器 选择触发器原型   逐个点开修改 {#IFDESCR}: ({#IFALIA ...

  5. 一文说通Dotnet Core的后台任务

    这是一文说通系列的第二篇,里面有些内容会用到第一篇中间件的部分概念.如果需要,可以参看第一篇:一文说通Dotnet Core的中间件   一.前言 后台任务在一些特殊的应用场合,有相当的需求. 比方, ...

  6. hadoop知识整理(3)之MapReduce之代码编写

    前面2篇文章知道了HDFS的存储原理,知道了上传和下载文件的过程,同样也知晓了MR任务的执行过程,以及部分代码也已经看到,那么下一步就是程序员最关注的关于MR的业务代码(这里不说太简单的): 一.关于 ...

  7. Docker——基于Docker安装Drupal博客系统

    Docker--基于Docker安装Drupal博客系统 向脚本文件追加内容 cat << EOF > build.sh #设置主机名 hostnamectl set-hostnam ...

  8. CentOS7——配置阿里云镜像源

    CentOS7--配置阿里云镜像源 #下载CentOS 7的repo文件 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun ...

  9. JFinal 源码解析-MVC部分

    首先从请求入口看起,应用初始化时加载web.xml的JFinalFilter,和configClass 从这段配置可以看出jfinal和spring mvc入口类似,通过一个实现Servlet Fil ...

  10. 搭建redis哨兵模式

    搭建redis哨兵模式,一主两从三哨兵   1.从官网下载redis安装包:此处是redis-5.0.7.tar.gz 2.上传到目录 /utxt/soft 3.解压 4.cd /utxt/soft/ ...