纯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>

纯css实现简单的页面视差滚动相关推荐

html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
html5简单幻灯片图片转换,用纯CSS实现简单的相册幻灯片
之前发了两篇关于CSS的文章,大家都比较关注,看来大家对这块东西都是很感兴趣的,现在趁热打铁再来一发~~ 简介一个用纯CSS实现的简单幻灯片效果,仅供实验,要看Demo请自备Chrome浏览器,勿用 ...
CSS/HTML简单静态页面
****使用CSS/HTML创建一个简单的页面**** 效果图页面效果,尺寸为题分为两张图学习了CSS以及HTML基础知识使用的是一些很基础的知识,画出了框架. 有一些简单的页面功能: 连接的ho ...
用纯CSS实现简单的相册幻灯片
之前发了两篇关于CSS的文章,大家都比较关注,看来大家对这块东西都是很感兴趣的,现在趁热打铁再来一发~~ 简介一个用纯CSS实现的简单幻灯片效果,仅供实验,要看Demo请自备Chrome浏览器,勿用 ...
告知书页面html样式,纯CSS实现的三种通知栏滚动效果
前言通知栏组件是一个比较常见的组件了,基本上每个站点都会有怎么个组件,主要就是通告站点的一些变化或者是告知一些中奖名单等作用. 最近在复习CSS3动画部分内容,想着平时通知栏组件大部分还是用JS来实 ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
纯css固定tbody高度，超出滚动效果
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...
html css字幕滚动代码,纯CSS实现滚动3D字幕
一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法.但我还是想使用HTML和CSS来实现这样的效果. 很多年以前,在Web上实现滚动文本的动画效果一般是采用marqu ...
html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享
34个网页视差滚动插件和视差特效教程分享 Sponsor 视差滚动这个设计趋势从去年开始一直流行到现在,这个特效的视觉体验非常不错,比如前面分享的<19个创意网页设计欣赏>文章,有很多使视 ...
史上最详细纯CSS打造3D文本滚动
昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http:// ...

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

纯css实现简单的页面视差滚动相关推荐

最新文章

热门文章