css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现
2024-09-01 11:41:03
看到一个需求,如下图,知乎手机网页版的一个视觉效果,对内容很长的部分有一个渐变的隐藏的效果,个人觉得这个设计还是很好的,符合手机大小的应用场景,没有一下子显示完全,可以很快的滑倒页面底部,一定程度上减少了滑动时间,用户体验很好,对整个页面有一个大概的预览,强迫症会感觉很爽。
具体怎么实现这个效果,分析一下:
可以看出来是一个渐变的效果,从上往下颜色变白,我们知道在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也是,万变不离其宗。
最新文章
- c#串口通信类代码可以直接调用
- 基于apache的tomcat负载均衡和集群配置
- 将服务器上的某些特定日志统一保存至XPS文件
- java安全令牌生成器
- <;转>;HTML中的table转为excel
- ICMP报文分析
- POJ 1065 Wooden Sticks / hdu 1257 最少拦截系统 DP 贪心
- 查看oracle数据库的大小和空间使用情况
- Mac之vim普通命令使用
- flume+kafka+storm单机部署
- U盘安装系统
- AngularJS学习篇(九)
- ASP.NET Core 中间件(Middleware)详解
- SQL 杂活
- YUI3组件框架之plugin
- web.xml中DispatcherServlet拦截器的配置详情
- Linux从入门到进阶全集——【第十四集:Shell基础命令】
- 动态规划——Dungeon Game
- 第1章 从开机加电到main函数之前的过程
- 通过 ppa 在ubuntu server 上安装java 8
热门文章
- Java Review (一、Java开发环境)
- OO学习最终总结
- 根据现有Bitmap生成相同图案指定大小的新Bitmap
- DML_Modifying Data Through Table Expressions_UPDATE
- selenium获取图片验证码
- CentOS安装部署Mysql 5.7
- 【String注解驱动开发】面试官让我说说:如何使用FactoryBean向Spring容器中注册bean?
- Area.js下载
- 【初学Java学习笔记】SQL语句调优
- Windows 安装RabbitMQ后,启动服务就自动停止