CSS揭秘--笔记--滚动提示
来源:互联网 发布:淘宝差评报复买家 编辑:程序博客网 时间:2024/05/18 01:48
我们实现的最终效果如下
目录结构如下
<ul> <li>Ada Catlace</li> <li>Alan Purring</li> <li>Schrödingcat</li> <li>Tim Purrners-Lee</li> <li>Webkitty</li> <li>Json</li> <li>Void</li> <li>Neko</li> <li>NaN</li> <li>Cat5</li> <li>Vector</li></ul>
css代码如下
ul { display: inline-block; overflow: auto; width: 7.2em; height: 7em; border: 1px solid silver; padding: .3em .5em; list-style: none; margin-top: 2em; font: 100 200%/1.6 'Frutiger LT Std', sans-serif; background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px, radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px, linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px, radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px; background-repeat: no-repeat; background-attachment: local, scroll, local, scroll; margin-top: 30px;}
实现这种特效的关键点在background-attachment属性,
If a background-image is specified, the background-attachment CSS property determines whether that image’s position is fixed within the viewport, or scrolls along with its containing block.
这个属性实现的是 如果存在背景图片,则该属性可以定义图片的位置,是相对于视图固定或是随着页面内容滚动。
具体属性如下(MDN描述)
Values
fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn’t move with the element.
local
This keyword means that the background is fixed with regard to the element’s contents: if the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
scroll
This keyword means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)
为了实现这个效果,我们需要两成背景,一层用来生成那条阴影,一层生成用来遮挡阴影的白色矩形,起作用类似于遮挡层,生成阴影的那层具有background-attachment 默认的值scroll, 遮挡背景的background-attachment 值为local,这样就会在我们滚动到最边缘是遮挡住阴影。
- CSS揭秘--笔记--滚动提示
- 《css揭秘》阅读笔记
- 《css揭秘》-学习笔记1
- CSS揭秘--笔记--自适应内部元素
- CSS揭秘--笔记--扩大可点击区域
- 《css揭秘》学习笔记(一)
- 《css揭秘》学习笔记(二)
- CSS揭秘--笔记--紧贴底部的页脚
- 表头固定内容滚动【css笔记】
- css笔记---自定义页面滚动条
- 13.(高级)CSS用户体验之:滚动提示
- css滚动
- css 滚动
- CSS 揭秘(Lea Verou)
- 《CSS揭秘》案例
- 《css揭秘》读书笔记
- CSS揭秘(引言)
- css揭秘pdf
- 向量的几何解释笔记(点积叉积矩阵)
- <數學之美>讀書心得(一)信息理論中熵-的初淺理解
- nginx: [error] OpenEvent("Global\ngx_reload_23212") failed (2: The system cannot find the file spec
- Android OpenGL 纹理绘制图像---总结
- nefu 25 计算高手
- CSS揭秘--笔记--滚动提示
- AngularJS 0005:作用域
- Java序列化机制和原理
- 沉浸式状态栏
- CCF 201509-4 高速公路(强连通分量缩点)
- bzoj 2160: 拉拉队排练 (manacher+前缀和+快速幂)
- Linux下创建软链接
- tomcat数据源的配置及其使用方法
- 关于global minimum cut