这篇文章主要为大家展示了CSS怎么实现滚动阴影效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“CSS怎么实现滚动阴影效果”这篇文章吧。
css是什么意思
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样:
可以看到,在滚动的过程中,会出现一条阴影:
对于两侧的列在滚动的过程中,静止不动,吸附在边界的问题,通常 CSS 使用 position: sticky
即可解决。
但是对于滚动过程中才出现的阴影(滚动容器内的内容没有贴边,则阴影出现,贴边,则阴影消失),之前的做法一直都是需要借助 JS 完成的。
那么,有没有纯 CSS 能够实现的方案呢?嘿嘿嘿,有。有一种非常讨巧的障眼法,下面就让我们来一步一步揭开它的面纱。
神奇的 background-attachment
要使用纯 CSS 实现上述滚动阴影,最核心的要使用到的元素就是 background-attachment
。
在较早的一篇文章里 -- CSS 实现视差效果,详细了介绍了 background-attachment
,借助了 background-attachment: fixed
可以简单的实现网站的滚动视差或者是类似图片点击的水纹效果,类似这样:
当然,今天我们的主角不是 background-attachment: fixed
,而是 background-attachment: srcoll
。
background-attachment: srcoll
首先,介绍一下 background-attachment
,如果指定了 background-image
,那么 background-attachment
决定背景是在视口中固定的还是随着包含它的区块滚动的。
简单而言,就是决定了在可滚动的容器中,背景图案是如何进行运动的。通过两个简单的 Demo,弄懂 background-attachment: srcoll
和 background-attachment: local
。
background-attachment: local
,这个就是和我们日常使用中的用法是一致的,可滚动容器的背景图案随着容器进行滚动:
background-attachment: scroll
,这个是今天的主角,它表明背景相对于元素本身固定, 而不是随着它的内容滚动:
如果你还没弄明白他们的区别,可以戳下面的 DEMO 自己感受一下:
Demo地址:https://codepen.io/Chokcoco/钢笔/xJJorg
引用><强> <代码> srcoll 代码>与<代码> 代码>同当地时使用,实现障眼法强>
到这里,可能很多同学还是懵的,我们到底要做什么呢?这个和本文的滚动阴影有什么关联呢?
别急,滚动阴影的难点在于,初始没有滚动的时候是没有阴影展现的,只有当开始滚动,阴影才会出现。
所以这里,我们借助<代码> background-attachment: srcoll 代码>和<代码> background-attachment:当地> 代码两个属性,在滚动初始的时候,利用两层背景叠加在一起隐藏阴影背景,真正滚动的时候,将叠加的部分移走,只漏出阴影部分即可。
嗯?什么意思。我们用给滚动容器,加上两个渐变效果,分别运用上<代码> background-attachment: srcoll 代码>和<代码> background-attachment:当地> 代码,再叠加起来,像是这样:
& lt; !——,可滚动容器,——比; & lt; ul> ,,,& lt; li>……& lt;/li> ,,,… ,,,& lt; li>……& lt;/li> & lt;/ul>CSS怎么实现滚动阴影效果