纯css实现简单的页面视差滚动

html代码：

<header>
        <h1>纯css实现视差滚动效果</h1>
</header>
<main>
        <article>
            <p>《洛神赋》是三国时期曹魏文学家曹植创作的辞赋名篇。此赋虚构了作者自己与洛神的邂逅和彼此间的思慕爱恋，洛神形象美丽绝伦，人神之恋飘渺迷离，但由于人神道殊而不能结合，最后抒发了无限的悲伤怅惘之情。全篇大致可分为六段：第一段写作者从洛阳回封地时，在恍惚之际看到洛神伫立山崖；第二段写洛神容仪服饰之美；第三段写作者爱慕洛神既识礼仪又善言辞，虽相互赠答，但担心遇合受阻；第四段写洛神为“君王”之诚所感后将来而未至的情状和举动；第五段写洛神来临扈从之多，终以人神道殊，含恨离去；第六段写洛神去后作者对顾望思慕不忍离去的深情。全赋辞采华美，描写细腻，想象丰富，情思绻缱，若有寄托。</p>
            <p>黄初三年2，余朝京师3，还济洛川4。古人有言：斯水之神，名曰宓妃5。感宋玉对楚王神女之事6，遂作斯赋。其辞曰：
                余从京域7，言归东藩8，背伊阙9，越轘辕10，经通谷11，陵景山12。日既西倾，车殆马烦13。尔乃税驾乎蘅皋14，秣驷乎芝田15，容与乎阳林16，流眄乎洛川17。于是精移神骇18，忽焉思散19。俯则未察，仰以殊观20。睹一丽人，于岩之畔21。乃援御者而告之曰22：“尔有觌于彼者乎23？彼何人斯，若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王之所见也，无乃是乎！其状若何？臣愿闻之。”
                余告之曰：其形也，翩若惊鸿，婉若游龙24。荣曜秋菊，华茂春松25。髣髴兮若轻云之蔽月，飘飖兮若流风之回雪26。远而望之，皎若太阳升朝霞27；迫而察之，灼若芙蕖出渌波28。秾纤得中29，修短合度30。肩若削成，腰如约素31。延颈秀项32，皓质呈露33。芳泽无加，铅华不御34。云髻峨峨35，修眉联娟36。丹唇外朗，皓齿内鲜37。明眸善睐38，靥辅承权39。瓌姿艳逸40，仪静体闲41。柔情绰态42，媚于语言。奇服旷世43，骨像应图44。披罗衣之璀粲兮45，珥瑶碧之华琚46。戴金翠之首饰47，缀明珠以耀躯。践远游之文履48，曳雾绡之轻裾49。微幽兰之芳蔼兮50，步踟蹰于山隅51。于是忽焉纵体，以遨以嬉52。左倚采旄53，右荫桂旗54。攘皓腕于神浒兮55，采湍濑之玄芝56。
                余情悦其淑美兮，心振荡而不怡57。无良媒以接欢兮，托微波而通辞58。愿诚素之先达59，解玉佩而要之60。嗟佳人之信修61，羌习礼而明诗62。抗琼珶以和予兮63，指潜川而为期64。执眷眷之款实兮65，惧斯灵之我欺66。感交甫之弃言兮67，怅犹豫而狐疑68。收和颜而静志兮69，申礼防以自持70。
                于是洛灵感焉，徙倚彷徨71。神光离合，乍阴乍阳72。竦轻躯以鹤立73，若将飞而未翔。践椒途之郁烈74，步蘅薄而流芳75。超长吟以永慕兮，声哀厉而弥长76。尔乃众灵杂沓77，命俦啸侣78。或戏清流，或翔神渚79，或采明珠，或拾翠羽80。从南湘之二妃81，携汉滨之游女82。叹匏瓜之无匹，咏牵牛之独处83。扬轻袿之猗靡84，翳修袖以延伫85。体迅飞凫86，飘忽若神。凌波微步，罗袜生尘87。动无常则，若危若安；进止难期88，若往若还。转眄流精89，光润玉颜。含辞未吐，气若幽兰90。华容婀娜，令我忘餐。
                于是屏翳收风，川后静波91。冯夷鸣鼓92，女娲清歌93。腾文鱼以警乘，鸣玉銮以偕逝94。六龙俨其齐首95，载云车之容裔96。鲸鲵踊而夹毂97，水禽翔而为卫。于是越北沚98，过南冈，纡素领，回清扬99。动朱唇以徐言，陈交接之大纲100。恨人神之道殊兮，怨盛年之莫当101。抗罗袂以掩涕兮，泪流襟之浪浪102。悼良会之永绝兮，哀一逝而异乡103。无微情以效爱兮104，献江南之明珰105。虽潜处于太阴，长寄心于君王106。忽不悟其所舍，怅神宵而蔽光107。
                于是背下陵高108，足往心留。遗情想像109，顾望怀愁。冀灵体之复形110，御轻舟而上溯111。浮长川而忘反112，思绵绵而增慕。夜耿耿而不寐113，沾繁霜而至曙。命仆夫而就驾114，吾将归乎东路115。揽騑辔以抗策，怅盘桓而不能去</p>
        </article>
</main>

css代码:

    <style>
        html,body {
            margin: 0;
        }
        * {
            box-sizing: border-box;
        }
        html {
            /* 需要隐藏最外层滚动条以使视差生效 */
            overflow: hidden;
        }
        body {
            overflow-x: hidden;
            overflow-y: auto;
            height: 100vh;
            /* 开启3d空间，数值越小，3d效果越大 */
            perspective: 1px;
            /* 在3d空间进行transform */
            transform-style: preserve-3d;
        }
        header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 100vh;
            transform-style: inherit;
        }
        header h1 {
            background-color: rgba(0, 0, 0, .7);
            color: white;
            padding: 1em 4em;
            font-size: 3em;
         
            
        }
        header::before {
            content: "";
            display: block;
            background-image: url("1.jpg");
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            /* 核心，按z轴向远处移动1px，大小会缩小1倍,使用scale放大到原图大小 */
            transform: translateZ(-1px) scale(2);
        }
        main {
            display: flex;
            justify-content: center;
            position: relative;
            background-color: #222f3e;
        }
        article {
            width: 90vw;
            max-width: 960px;
            padding: 6em 0;
            color: white;
            font-size: 18px;
            text-align: justify; /*实现两端对齐文本效果 */
            /* 增加或减少字符间的空白（字符间距） */
            letter-spacing: 0.075em;
            text-indent: 2em;
            line-height: 1.8em;
        }
        /* 屏幕适配 */
        @media screen and (max-width: 1024px) {
            header h1 {
                font-size: 2.5em;
                padding: 1em 1.5em;
            }
        }
        @media screen and (max-width: 600px) {
            header h1 {
                font-size: 1.5em;
                padding: 1em 1em;
            }
            article {
                font-size: 1em;
            } 
        }
    </style>