纯css导航滚动阴影

àì夳堔傛蜴生んèń 2024-04-07 12:26 32阅读 0赞

body {
        
                margin: 0;
                padding: 0;
            }
            .header {
        
                position: sticky;
                background: #fff;
                top: 0;
                font-size: 20px;
                height:50px;
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .shadow::before {
        
                content: '';
                box-shadow: 0 0 10px 1px #333;
                position: fixed;
                width: 100%;
            }
            .shadow::after {
        
                content: '';
                width: 100%;
                height: 20px;
                background: linear-gradient(to bottom, #fff 50%, transparent);
                position: absolute;
            }
            .main {
        
                height:1000px;
                padding:20px 10px 10px 10px;
            }

<div class="header">不忘初心，方得始终</div>
        <div class="shadow"></div>
        <div class="main">
            林扬生
        </div>

See the Pen [ 纯css导航滚动阴影][_css] by qianhuiya ( [@quinhua][quinhua]) on [CodePen][].

[_css]: https://codepen.io/quinhua/pen/xxWBEBg
[quinhua]: https://codepen.io/quinhua
[CodePen]: https://codepen.io

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css导航滚动阴影

body { margin: 0; padding: 0; }

àì夳堔傛蜴生んèń/ 2024年04月07日 12:26/ 0 赞/ 33 阅读

相关震惊！纯 CSS 的导航栏切换方案

本文是非常有意思的一篇文章，介绍了 CSS 中，非常强大的一个知识点：如何通过点击某个元素，控制其他元素~ 不用 `Javascript`，使用纯 `CSS` 方案，实现

亦凉/ 2022年11月14日 13:16/ 0 赞/ 151 阅读

相关 CSS 文本阴影

CSS 文本阴影 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

た入场券/ 2022年11月13日 05:21/ 0 赞/ 184 阅读

相关纯CSS视差滚动

参考旭哥的：[http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/][http_www.z

ゝ一世哀愁。/ 2022年09月23日 13:51/ 0 赞/ 234 阅读

相关横向滚动条导航的实现（纯css）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

水深无声/ 2022年09月05日 12:53/ 0 赞/ 223 阅读

相关纯CSS实现面包屑式导航

参照着[教程][Link 1]做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图： ![221956386835074.jpg][]

柔光的暖阳◎/ 2022年08月06日 12:24/ 0 赞/ 199 阅读

相关纯css，div隐藏滚动条，保留鼠标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容

浅浅的花香味﹌/ 2022年06月04日 05:11/ 0 赞/ 260 阅读

相关纯CSS/CSS3 导航合集（原创）

> 小编自己的个人原创纯CSS CSS3水平导航合集导航一：源码地址：[http://www.jq22.com/jquery-info20013][http_www

怼烎@/ 2022年02月13日 08:07/ 0 赞/ 153 阅读

相关不可思议的纯 CSS 滚动进度条效果

结论先行，如何使用 CSS 实现下述滚动条效果？ [![scrollbar][]][scrollbar 1] 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。在

小咪咪/ 2022年01月30日 11:19/ 0 赞/ 253 阅读

相关 css 阴影

盒子阴影 (1)前两个方向阴影必写 (2)默认为阴影向外 (3)可通过，逗号设置多个方向阴影:npx npx nxp 颜色,npx npx

痛定思痛。/ 2021年07月24日 12:07/ 0 赞/ 437 阅读