css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现

时间: 2017-12-19阅读: 2492标签: 渐变

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


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

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

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

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

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

 

方案一:

HTML:

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

CSS:

<style>
body{
	position: relative;
}
.show_text{
	width: 100%;
	margin:0 auto;
}
.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);
}
</style>

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



方案二:

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

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

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


后记:

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


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/260

CSS3 渐变(Gradients)

渐变的效果是由浏览器生成的,渐变的类型主要分为两种:线性渐变(Linear Gradients)和径向渐变(Radial Gradients);线性渐变是一个向上、向下、向左、向右或者对角方向的渐变

css 颜色渐变 兼容性

一开始用 background: linear-gradient(to right, #000,#fff) ,谷歌、360极速模式、火狐、欧朋(都是新版)可以兼容;ie9 不可以兼容。所以为了ie或其他较低版本浏览器兼容:

js如何计算两个颜色之间的渐变色值?

对给定的两个颜色值进行渐变计算,得到渐变的所有色值的数组。 示例:计算 #ec9089 与 #c12927 之间的渐变色值,步长设定为 100

css3渐变之线性渐变linear-gradient

线性渐变:为了创建一个线性渐变,必须至少定义两种颜色结点。同时,也可以设置一个起点和一个方向(或一个角度)。其共有三个参数:第一个参数表示线性渐变的方向,第二个和第三个参数分别是起点颜色和终点颜色。

css文字渐变色_css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考!

css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考!

漂亮的 css3 渐变色

精选最酷的渐变色调,coolHue有60个最酷的渐变颜色,能复制 CSS3 代码和直接下载背景图片。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全