纯css实现视差滚动加文字,纯CSS视差滚动原理及实例
定义
网页设计中的视差来源于生活体验：在观察者运动时，离眼睛距离越远的物体运动速度越慢，离眼睛距离越近的物体运动速度越快。所谓的视差就是在视觉中物体运动速度的差别。
基础视差效果：纯CSS中的fixed
两个相邻物体一个静止，一个运动，两者的差别可以形成基础的视差效果。
在网页设计中基础的视差效果可以简单利用css中fixed实现。
注意：css中的fixed都是相对于可视区，包含background-attachment:fixed，虽然包含背景的块可能被覆盖移动了，但是出现时，背景图相对于窗口是固定的，随着滚动条也会出现视差效果。
background-attachment:fixed实现视差background-attachment:scroll|fixed|inherit;
scroll：默认值。背景图像会随着页面其余部分的滚动而移动；
fixed：当页面的其余部分滚动时，背景图像不会移动；
inherit：规定应该从父元素继承 background-attachment 属性的设置。
在网页设计中经常采用固定背景，一般采取的是全局body的背景固定。
其实这就是一种视差，body上的文字等前景随滚动条滚动，背景一直固定不动。
当设置某一个块背景固定时，相邻的块与其背景形成的视差更加明显。
固定的背景会慢慢被吞噬或者展开，其中最好设置z-index，保证效果不出错。
实例：html>
迷津渡口-background-attachment:fixed实现视差滚动
html,body{height:100%;padding:0;margin:0;}
a{color:#b4d7a8;text-decoration:none;}
div{padding:0;margin:0;}
#maincontainer{position:relative;z-index:1;height:100%;}
/*背景固定*/
.bgfixed{position:relative;z-index:1;min-height:100%;background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:center center;}
.bgfixed h1,.bgfixed h2{position:absolute;left:50%;top:50%;bottom:auto;right:auto;width:90%;max-width:1170px;text-align:center;font-size:30px;font-size:1.875rem;text-shadow:0 1px 3px rgba(0,0,0,0.3);color:white;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
.bgimage1{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/1848374802016122614500609.jpg?1920x1440_120");}
.bgimage2{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145039027.jpg?1920x1280_120");}
.bgimage3{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145107011.jpg?1920x1278_120");}
/*背景滚动*/
.bgscroll{position:relative;z-index:2;min-height:100%;line-height:1.6;}
.innercontainer{width:90%;max-width:768px;margin:0 auto;}
.innercontainer::before{content:'';display:table;clear:both;}
.innercontainer::after{content:'';display:table;clear:both;}
.innercontainer p{text-indent:2em;}
.bgcolor1{color:#a6989a;background-color:#3d3536;}
.bgcolor2{color:#3d3536;background-color:#99a478;}
迷津渡口
再别康桥
作者：徐志摩
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
甘心做一条水草！
那榆荫下的一潭，
不是清泉，是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
诗意的栖居
江南的雨
作者：也恋红尘
曾经多少次在梦里，我撑着红色的绣伞，踱步在江南的烟雨中。花丛间，细风里，雨飘忽如雾，单身映荷莲。而今天当我置身这江南的雨中，却让我生出了楚楚可怜的愁绪， 阻绊了我闲逸的脚步，雨打湿了我的裤脚，更湿了我寂寞的心。
远眺着雨中的青山，脸上的忧郁诉说着我的落寞。和风细雨不思归，站在烟雨朦胧中，我望穿了前世的轮回！我像失魂潦倒的诗人，不停的漫步在古朴的江南小巷，寻找着曾经梦中的江南美景。烟水一色，雾绕城连，还有雨天里秀发如丝，肤如凝脂，臂如白藕的江南女子。“今宵酒醒何处?杨柳岸.晓风残月!”“小桥流水人家！”
我在江南的雨中长醉，多情的柳喃喃的笑，梅叶拂岸，不觉中我泪流满面。雨抚平我执意的悲伤，街边的绿草，也多情温柔地拍打着我的心房。这个时候，最怕见到比翼双飞的燕子;因为我会怀疑它们是故意在我的面前飞翔，故意要让我倾慕。它们嘲笑着我：醉入江南的雨季。却心怀一缕相思。双眼中，有一幅绝世的丹青。那是我梦中雨雾缭绕的思绪，江南的雨景，多想与君挽臂，唱一曲地久天长。却不想在我吟哦的惆怅中化成千古的憾事。
江南的雨是婉约的 。 在唐诗宋词的意境里，几乎每一位诗人词家都曾借雨抒情，借雨舒怀。今人听雨，不必掉入那满怀愁绪，但独处当为听雨佳境。
一茶一书，临窗闲坐，听雨点敲打着窗棂，丁冬作响，涓涓水流，顺檐而下，敲打在树叶上，沙沙低吟。窗外倘有数枝绿竹或几叶芭蕉亦或一棵梧桐，那就更是一种可遇不可求的意境。“自移一榻蕉窗下，更近丛篁听雨声”，动人诗情，兴人乐感，使人心旷神怡。“落花人独立，微雨燕双飞。”这该是怎样的人生境地？
冬天的江南，不是梅雨，这雨穿着梦幻的轻纱缓缓而来，她素手轻扬抓住秋娘那流香的衣袖，羞羞的说：“若不能许我一世情长，请给我一场雨，一场爱恋已久的江南雨。”我在这里倚窗听雨，声色成韵，弹奏一曲云水禅心，仿佛一瞬间看到小桥流水、青石、雨巷、丁香飘落的忧伤、听到了乌篷船的橹声……清梦又在笔尖停靠，慢慢地续写一幅江南烟雨……更见唐风宋彩。
天街小雨润如酥，草色遥看近却无”。江南的草色碧翠，娇弱柔嫩。江南的雨濛濛的，轻盈空灵、似雾似烟、如梦如幻。江南的雨是绣女手中的针线，一针一针绣壮山河，一线一线织满水媚。江南的雨是江南女子的发丝，她温柔、细腻、婉约、高贵，她在门前执一把木梳梳理散落的青丝，一梳，一梳，雨丝交织着发丝，丝丝莹润，根根关情，心上续起无限的柔情和诗意，渐次漾开一朵心事。一丝情萦似金银花般开放着，一段过往，一个故事在每一隅萌动、蔓延、蔓延在流年里。
江南冬是北方的秋，是莺莺的曲，悠悠成溪。不信你看，淡淡的阴郁， 宛如一帘幽梦！稀稀疏疏，淅淅沥沥。雨丝成线，成帘，像似天上掉下的珠帘不慎遗落人间，媚了河山。江南的雨是洒落一地的花瓣雨，看看那地上细雨洗掉枫叶的朱红，冲走残花的娇躯，不正是画家笔下一幅写意江南吗？轻触岁月的凉薄，抚慰季节的萧瑟，雨的心柔柔的带一份情意留一束秋菊放置你心里。天冷了有菊相伴，寂寞了，有雨相连，秋风秋雨秋景在 心里， 依依不舍，泪水盈盈，落了一地相思，湿了伊莲的真心。
江南的雨泠泠冽冽，淋淋漓漓，这时你可以不带雨具出门，让自己与冬雨尽情欢腾，走着走着迎面扑来潇潇的风，风不大，呼呼地卷着身子向前，一抹的凉意袭上心头，顿时觉得寒气欺身。雨或大或小，落在脸上身上，清爽，丝滑，落在我的面颊上，凉凉的，素素的，很舒服，像是不施粉黛的女子，素衣素服，素心素面，一切都素素的，总让你忍不住多看几眼，她是素的，内心散发着一股清新的纯洁气息，清洗着我心中的烦闷。
江南的雨落在荷塘里，而此时的荷塘已经黄了叶，枯了隅，只剩下一汪碧水。看看那雨打水面的样子，让人生出太多的怜愁！江南是个多愁善感的地方，溶着我淡淡的思绪，想君，在江南的夜。思君在江南的冬，感君在江南的雨！多少次在梦里，与君挽臂而行，品味这人生的雨季，然后走出一片沼泽，在东方吐晓时，唱一曲地久天长！
这一曲便是我人生的奢望。
不悔梦归处 只恨太匆匆
背景高度大于内容高度时会出现漂亮的视差效果：
实例：html>
迷津渡口-background-attachment:fixed实现视差滚动
html,body{height:100%;padding:0;margin:0;}
a{color:#b4d7a8;text-decoration:none;}
div{padding:0;margin:0;}
#maincontainer{position:relative;z-index:1;height:100%;}
/*背景固定*/
/*这里设置了块高度仅为50%，从而形成不同的视差效果*/
.bgfixed{position:relative;z-index:1;height:50%;background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:center center;}
.bgfixed h1,.bgfixed h2{position:absolute;left:50%;top:50%;bottom:auto;right:auto;width:90%;max-width:1170px;text-align:center;font-size:30px;font-size:1.875rem;text-shadow:0 1px 3px rgba(0,0,0,0.3);color:white;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
.bgimage2{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145039027.jpg?1920x1280_120");}
.bgimage3{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145107011.jpg?1920x1278_120");}
/*背景滚动*/
.bgscroll{position:relative;z-index:2;min-height:100%;line-height:1.6;}
.innercontainer{width:90%;max-width:768px;margin:0 auto;}
.innercontainer::before{content:'';display:table;clear:both;}
.innercontainer::after{content:'';display:table;clear:both;}
.bgcolor1{color:#a6989a;background-color:#3d3536;}
.bgcolor2{color:#3d3536;background-color:#99a478;}
再别康桥
作者：徐志摩
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
甘心做一条水草！
那榆荫下的一潭，
不是清泉，是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
诗意的栖居
江南的雨
作者：也恋红尘
曾经多少次在梦里，我撑着红色的绣伞，踱步在江南的烟雨中。花丛间，细风里，雨飘忽如雾，单身映荷莲。而今天当我置身这江南的雨中，却让我生出了楚楚可怜的愁绪， 阻绊了我闲逸的脚步，雨打湿了我的裤脚，更湿了我寂寞的心。
远眺着雨中的青山，脸上的忧郁诉说着我的落寞。和风细雨不思归，站在烟雨朦胧中，我望穿了前世的轮回！我像失魂潦倒的诗人，不停的漫步在古朴的江南小巷，寻找着曾经梦中的江南美景。烟水一色，雾绕城连，还有雨天里秀发如丝，肤如凝脂，臂如白藕的江南女子。“今宵酒醒何处?杨柳岸.晓风残月!”“小桥流水人家！”
我在江南的雨中长醉，多情的柳喃喃的笑，梅叶拂岸，不觉中我泪流满面。雨抚平我执意的悲伤，街边的绿草，也多情温柔地拍打着我的心房。这个时候，最怕见到比翼双飞的燕子;因为我会怀疑它们是故意在我的面前飞翔，故意要让我倾慕。它们嘲笑着我：醉入江南的雨季。却心怀一缕相思。双眼中，有一幅绝世的丹青。那是我梦中雨雾缭绕的思绪，江南的雨景，多想与君挽臂，唱一曲地久天长。却不想在我吟哦的惆怅中化成千古的憾事。
江南的雨是婉约的 。 在唐诗宋词的意境里，几乎每一位诗人词家都曾借雨抒情，借雨舒怀。今人听雨，不必掉入那满怀愁绪，但独处当为听雨佳境。
一茶一书，临窗闲坐，听雨点敲打着窗棂，丁冬作响，涓涓水流，顺檐而下，敲打在树叶上，沙沙低吟。窗外倘有数枝绿竹或几叶芭蕉亦或一棵梧桐，那就更是一种可遇不可求的意境。“自移一榻蕉窗下，更近丛篁听雨声”，动人诗情，兴人乐感，使人心旷神怡。“落花人独立，微雨燕双飞。”这该是怎样的人生境地？
冬天的江南，不是梅雨，这雨穿着梦幻的轻纱缓缓而来，她素手轻扬抓住秋娘那流香的衣袖，羞羞的说：“若不能许我一世情长，请给我一场雨，一场爱恋已久的江南雨。”我在这里倚窗听雨，声色成韵，弹奏一曲云水禅心，仿佛一瞬间看到小桥流水、青石、雨巷、丁香飘落的忧伤、听到了乌篷船的橹声……清梦又在笔尖停靠，慢慢地续写一幅江南烟雨……更见唐风宋彩。
天街小雨润如酥，草色遥看近却无”。江南的草色碧翠，娇弱柔嫩。江南的雨濛濛的，轻盈空灵、似雾似烟、如梦如幻。江南的雨是绣女手中的针线，一针一针绣壮山河，一线一线织满水媚。江南的雨是江南女子的发丝，她温柔、细腻、婉约、高贵，她在门前执一把木梳梳理散落的青丝，一梳，一梳，雨丝交织着发丝，丝丝莹润，根根关情，心上续起无限的柔情和诗意，渐次漾开一朵心事。一丝情萦似金银花般开放着，一段过往，一个故事在每一隅萌动、蔓延、蔓延在流年里。
江南冬是北方的秋，是莺莺的曲，悠悠成溪。不信你看，淡淡的阴郁， 宛如一帘幽梦！稀稀疏疏，淅淅沥沥。雨丝成线，成帘，像似天上掉下的珠帘不慎遗落人间，媚了河山。江南的雨是洒落一地的花瓣雨，看看那地上细雨洗掉枫叶的朱红，冲走残花的娇躯，不正是画家笔下一幅写意江南吗？轻触岁月的凉薄，抚慰季节的萧瑟，雨的心柔柔的带一份情意留一束秋菊放置你心里。天冷了有菊相伴，寂寞了，有雨相连，秋风秋雨秋景在 心里， 依依不舍，泪水盈盈，落了一地相思，湿了伊莲的真心。
江南的雨泠泠冽冽，淋淋漓漓，这时你可以不带雨具出门，让自己与冬雨尽情欢腾，走着走着迎面扑来潇潇的风，风不大，呼呼地卷着身子向前，一抹的凉意袭上心头，顿时觉得寒气欺身。雨或大或小，落在脸上身上，清爽，丝滑，落在我的面颊上，凉凉的，素素的，很舒服，像是不施粉黛的女子，素衣素服，素心素面，一切都素素的，总让你忍不住多看几眼，她是素的，内心散发着一股清新的纯洁气息，清洗着我心中的烦闷。
江南的雨落在荷塘里，而此时的荷塘已经黄了叶，枯了隅，只剩下一汪碧水。看看那雨打水面的样子，让人生出太多的怜愁！江南是个多愁善感的地方，溶着我淡淡的思绪，想君，在江南的夜。思君在江南的冬，感君在江南的雨！多少次在梦里，与君挽臂而行，品味这人生的雨季，然后走出一片沼泽，在东方吐晓时，唱一曲地久天长！
这一曲便是我人生的奢望。
position:fixed实现视差
position设置为fixed可生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，不会随滚动条滚动。
普通元素随滚动条而动，position为fixed的元素不随滚动条而动，形成静止和运动的视差。
这种视差常常运用在顶部导航、底部导航、侧边辅助栏等需要一直放置在可视区域供访客随时可访问的区块。
position设置为fixed的同时需要设置z-index为一个较大的值，小指一般设置为999，保证其显示在最上层。
实例：html>
迷津渡口-position:fixed实现视差滚动
html,body{width:100%;padding:0;margin:0;font-size:16px;background:rgba(194,240,194,.6) url(http://7xtj5b.com1.z0.glb.clouddn.com/qingzzcn_mijindukou/images/templateback.jpg) no-repeat fixed;background-size:cover;}
a{color:#3a87ad;text-decoration:none;}
a:link{color:#3a87ad;text-decoration:none;}
a:hover{color:#3a87ad;text-decoration:none;}
a:actived{color:#3a87ad;text-decoration:none;}
a:visited{color:#3a87ad;text-decoration:none;}
/*固定位置，添加z-index为999，保证最上层*/
#header,#footer{position:fixed;z-index:999;left:0;height:70px;background-color:rgba(255,255,255,.8);}
#header {top:0;width:100%;}
/*footer的left和right都设置为0,margin-left和margin-right都设置为auto可居中*/
#footer{bottom:0;left:0;right:0;width:800px;margin:0 auto;border-radius:20px;}
#footer #nav{width:780px;margin:0 auto 30px;padding-left:20px;}
#nav{width:800px;height:40px;margin:30px auto 0;}
#nav ul{padding:0;margin:0;}
#nav .link{float:left;margin-right:2px;list-style:none;}
#nav a{display:block;height:40px;line-height:40px;padding:0 20px;font-size:22px;}
#nav .link:hover,#nav .current{background-color:#f16e50;-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);transform:skew(-20deg);}
#nav a:hover,#nav .current a{color:#fff;}
#maincontent{position:relative;width:760px;padding:30px 20px;border-radius:20px;margin:90px auto;background-color:rgba(255,255,255,.8);}
#maincontent p{text-indent:2em;}
h2,h4{text-align:center;}
- 首页
- emlog
- php
- javascript
- ajax
- css
- 归档
- 留言板
生命柔软，时光清浅
作者:携一缕心殇，共话红尘凄凉
清晨，一轮橘红色的阳光从地平线上升起，给笼罩在氤氲迷雾的大地涂摸上了一层霞光，虽是冬天，浓重的白霜盖住了草丛、田垛、菜蔬、田间、原野。然而这丝丝缕缕黄灿灿的光亮驱散了雾障霜凝朦胧的早晨，尤如穴居久了的生灵凝聚的血液重又活跃起来了。阴冷了一段时日的冬天，乘着这明媚的亮光，几乎家家户户皆争先恐后洗衣搓被单，翻晒被褥，阳光是有味道的，晚上躺在接受了紫外线曝晒的被窝里，郁香浓烈，连做的梦都是那般的甜。
时光的辗转，一如流水般匆匆，指尖的年华，渐渐瘦成了一弦眉弯。坐在光阴深处，捻一瓣心香，将时光走过留下的清喜翻了又翻，看了又看。 走过的路，留下的心情，在心间慢慢开出了一朵风雅，丰盈了时光，旖旎了幽香点点。流年中，一些人，来了又去，一些缘，聚了又散，，得得失失的行程，浮浮沉沉的心境，总有一些素念，如影随行；总有一些感悟，铭记心间。 岁月是一壶陈年的佳酿，越往时光的深处行走，愈会发觉， 岁月中不但有山长水远，蓑草绵绵，还隐藏着细微的静好， 包蕴着淡淡的清欢。生命的美好在于从走过的行程， 经历的风霜中不断走向成熟，待繁华过尽，心素如简，恬淡安然。
不可以消沉，因为还有责任；心，不可以冰冷，因为还有朋友；爱，不可以绝望，因为还有亲人；命，不可以轻视，因为还有父母；泪，不可以轻流，因为还有自尊；情，不可以执着，因为还有伤痛；缘，不可以强求，因为还有离散；苦，不可以倾诉，因为还有自我；伤，不可以流露，因为还有疤痕；诺，不可以轻许，因为还有来世；人生，简简单单就好；生命，健健康康就好；生活，快快乐乐就好。
人的一生中，总有一些不舍的情结，令人难以忘怀。人世间的沧桑变化，人情中的世故冷暖，尘世间的悲欢离合，生活中的酸甜苦辣咸。舍的情结，令人难以割舍。
流年，是一首涓涓不息无字的歌，一直流淌在心田，那人那些事总是惦念不忘。还有或许那些情感，总是难以割舍。
错过的风景总是难以忘记，人生中的遇见，交错，已然是刻骨铭心。时光，就在这念与不念之间渐行渐远，心就在路上，一半明媚，一半忧伤。有些情，虽然短暂，却已然走过心间；有些人，近在咫尺，却是一生无缘。总以为，不再想起，就不再染相思；总以为，不再念起，就不会再有忧伤；总以为，放不下所有，却会在眼泪掉下时转身离开，或者一个不经意间的转身就是永远。
这些往事，将尽藏于心，这些过往，将尘封收藏，不再去问流水无情还是落花无意，也不再执着的找寻有你的天涯。
愿将所有的牵念，化做深深的祝福；你一定要比我幸福，爱若相逢，记住已然足够。有多少光阴可以用来等待？有多少人值得回眸？慢慢的就会发现，一直执着的东西，想着想着就淡了；一直在乎的人，走着走着就散了，谁能执守一颗心，直到永远？谁愿牵一人手，走过沧海桑田？写过太多风花雪夜的缠绵；听过太多天长地久的期许，岁月中的一地阑珊，再也无法拾起，有一种相遇叫情深缘浅；有一种结局是曲终人散。
爱过，痛过，哭过笑过，然后借一方晴空，拥抱阳光，继续坚强。放下该放下的，珍惜所拥有的，一笑而过，安然生活。一支蘸了胭脂的画笔，任你在时光的镜中怎样涂抹，也描摹不出最初的滋味，曾经的风景再美，也只是曾经而已。
只有回不去的过去，没有过不完的当下，伤划在心底，痛过了，终会结茧，其实，我们每个人都比想象中的要坚强。手中的花茶寂寥无声，只留一手的余温，经历过后再想起，那些曾经唱过的歌，依然飘荡在心里；曾经爱过的人，却再也提不起恨，遇到了，莫问是缘是劫，爱过了，别问缘深缘浅，珍惜了，便是永远。在心中留一径浅香给彼此，若忆起，便是温暖。
- 首页
- emlog
- php
- javascript
- ajax
- css
- 归档
- 留言板
background-attachment:fixed和position:fixed结合实现背景滚动视差
文字使用块包裹配置位置为position:fixed，并置于可视区的中央，z-index置于最上层。
用div包裹不同的背景块，设置背景为background-attachment:fixed，z-index设置为1。
两者结合实现文字不动，而背景视差滚动的效果。
实例：html>
迷津渡口-background-attachment:fixed和position:fixed实现背景视差滚动
html, body { height: 100%; padding: 0; margin: 0; }
/*文字位置固定于最上层*/
#title { position: fixed; width: 100%; height: 60px; line-height: 60px; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 30px; color: white; text-align: center; }
/*div包裹背景图片滚动*/
.bgfixed { position: relative; z-index: 1; min-height: 100%; background-attachment:fixed;}
.bgimage1 { background-image: url("http://image18.poco.cn/mypoco/myphoto/20161226/14/1848374802016122614500609.jpg?1920x1440_120"); }
.bgimage2 { background-image: url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145039027.jpg?1920x1280_120"); }
.bgimage3 { background-image: url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145107011.jpg?1920x1278_120"); }
不悔梦归处 只恨太匆匆
纯CSS实现的视差滚动效果挺好用的，下一篇将是结合js实现的视差滚动，敬请期待哦~
纯css实现视差滚动加文字,纯CSS视差滚动原理及实例相关推荐
- html滚动图片代码加文字,HTML代码制作滚动文字
这篇文章主要介绍了关于HTML代码制作滚动文字,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性 ...
- css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- html页面css3滚动加载,aos.js-网页滚动加载动画的jQueryCSS3动画库
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. MIT许 ...
- 示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
- Ulead GIF Animator制作滚动的文字条幅，循环滚动
1.右键,添加文字条幅. 2.设置画面帧,画面帧设置多少,就是表示这个文字条幅添加到多少帧里面. 3.再设置文字条幅的位置,并选择,与对象重叠帧同步.将所有的文字条幅位置改好. 汉码盘点机!专注傻瓜式 ...
- css给图片底部加阴影,使用CSS给图片添加阴影的方法
网页制作poluoluo文章简介:一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以 ...
- ios html加载css样式,iOS加载HTML, CSS代码
NSString *strHTML = @" // NSString *strHTML = model.goods_datails; NSMutableString *targerStr = ...
- Vue踩坑之旅（四）—— 自定义指令实现滚动加载
这几天在做商城首页的商品列表,商品卡片的数量很多,如果一次性加载那么多,加载较慢,而且用户体验不好.所以使用鼠标无限滚动加载效果更好. 实现滚动加载的方式有很多,有现成的组件 InfiniteScro ...
- 无限滚动加载最佳实践
无限滚动加载最佳实践 无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...
- 为什么css文件是.main,页面无法加载main.css
yii2 如何在页面底部加载css和js 作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留 ...
最新文章
- Ubuntu 16.04 LTS界面美化
- [zz]jQuery.extend 函数详解
- 【邀请函】2021钉钉宜搭·线上沙龙，邀您云上相见！
- 修改场景默认pawn的方法
- linux安装selenium、chromedriver、Chrome浏览器、BrowserMob Proxy（代理）爬虫爬站环境安装及测试实例
- vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题
- 美景听听Ai语音导游，助力华为荣耀PLAY手机发布
- oracle for aix 7,ORACLE 11.2.0.2 RAC for AIX 7.1
- 白嫖党进，全网最详细的信息安全术语合集终于来了
- matlab信号系统响应实验,信号与系统实验(MATLAB版) (1)
- NSSM 制作 window 服务
- SQLite 数据库存取图片（QT方式）
- 用Python实现随机森林回归
- 【十】比例尺添加以及调整
- 开启和关闭android移动网络
- python的dict
- Adobe：Flash中存在高危零日漏洞
- 3个字节转换为另外3个字节的简单加密算法
- 解决安装PHP 5.6.40版本途中坑坑洼洼
- c语言中如果产量的隐藏类型是,如果随着产量的增加，生产函数首先表现出边际产量增加，然后表现出边际产量递减，那么相应的边际成本曲线将 答案：是U形的...