<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}
* {
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, 0.7);
color: white;
padding: 1em 4em;
font-size: 3em;
}
header::before {
content: "";
display: block;
background-image: url("https://img1.baidu.com/it/u=3039515990,3753749249&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500");
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
/* 核心 */
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>
</head>
<body>
<header>
<h1>纯 CSS 实现视差滚动效果</h1>
</header>
<main>
<article>
<p>《洛神赋》是三国时期曹魏文学家曹植创作的辞赋。此赋虚构了作者自己与洛神的邂逅和彼此间的思慕爱恋，洛神形象美丽绝伦，人神之恋飘渺迷离，但由于人神道殊而不能结合，最后抒发了无限的悲伤怅惘之情。全篇大致可分为六段：第一段写作者从洛阳回封地时，在恍惚之际看到洛神伫立山崖；第二段写洛神容仪服饰之美；第三段写作者爱慕洛神既识礼仪又善言辞，虽相互赠答，但担心遇合受阻；第四段写洛神为“君王”之诚所感后将来而未至的情状和举动；第五段写洛神来临扈从之多，终以人神道殊含恨离去；第六段写洛神去后作者顾望思慕不忍离去的深情。全赋辞采华美，描写细腻，想象丰富，情思绻缱，若有寄托。</p>
<p>
黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋。其辞曰： 余从京域，言归东藩。背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散。俯则未察，仰以殊观，睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王之所见也，无乃是乎？其状若何？臣愿闻之。” 余告之曰：“其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。髣髴兮若轻云之蔽月，飘飖兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。
于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。攘皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡。无良媒以接欢兮，托微波而通辞。愿诚素之先达兮，解玉佩以要之。嗟佳人之信修兮，羌习礼而明诗。抗琼珶以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺。感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。 于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔。践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。 尔乃众灵杂沓，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女。叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。体迅飞凫，飘忽若神，凌波微步，罗袜生尘。动无常则，若危若安。进止难期，若往若还。转眄流精，光润玉颜。含辞未吐，气若幽兰。华容婀娜，令我忘餐。
于是屏翳收风，川后静波。冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝。六龙俨其齐首，载云车之容裔，鲸鲵踊而夹毂，水禽翔而为卫。 于是越北沚。过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当。抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮，哀一逝而异乡。无微情以效爱兮，献江南之明珰。虽潜处于太阴，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。 于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘返，思绵绵而增慕。夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路。揽騑辔以抗策，怅盘桓而不能去。
</p>
</article>
</main>
</body>
</html>
效果图：
