当前位置：首页 > 下载站 > js特效 > 其它特效 > CSS3的全屏图片视差滚动切换特效

CSS3的全屏图片视差滚动切换特效

分类: js特效 / 其它特效	发布时间: 2017-12-16	访问量: 1541
下载量: 46

点击下载预览效果

更多>

最新下载

jQuery企业留言表单联系代码

jQuery企业留言表单联系代码是一款简洁实用的企业留言表单和联系我们介绍页面代码。

118 2024-02-29

HTML5 MP3音乐盒播放特效

HTML5 MP3音乐盒播放特效是一款基于html5+css3制作可爱的音乐盒表情，点击开关按钮mp3音乐播放器。

112 2024-02-29

HTML5炫酷粒子动画导航菜单特效

HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。

142 2024-02-29

jQuery可视化表单拖拽编辑代码

jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单。

102 2024-02-29

VUE.JS仿酷狗音乐播放器代码

VUE.JS仿酷狗音乐播放器代码是一款基于js跟css3实现的仿酷狗网页音乐播放器特效。

84 2024-02-29

经典html5推箱子小游戏

经典html5推箱子小游戏总共有100关，移动方式有上下左右按键。

134 2024-02-29

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

10917 2025-08-28
CSS3 教程

1273371 2025-08-27
Rust 教程

16988 2025-08-27
Vue 教程

19813 2025-08-22
PostgreSQL 教程

17573 2025-08-21
Git 教程

7240 2025-08-21

CSS3的全屏图片视差滚动切换特效

这是一款基于CSS3实现的全屏图片视差滚动切换特效，网页滚动视差切换代码。

<style>

* { padding: 0; margin: 0 }
body { text-align: center; /*background-attachment:fixed;*/ width: 100%; }
#main { width: 100%; margin: auto }
/*.header{
background:#fff;

}*/
.header { width: 100%; height: 1080px; overflow: hidden; position: relative; background: url("a1.png") center center no-repeat; background-attachment: fixed; background-size: cover; }
.header2 { background: url("a3.png") center center no-repeat; background-attachment: fixed; background-size: cover; }
.text { position: absolute; top: 30%; left: 300px; }
.text p { font-size: 30px; font-family: "微软雅黑"; color: #fff; }
.bg-attachment { background: url("a2.png") center center no-repeat; background-attachment: fixed; background-size: cover; }
.bg-attachment .shadow { width: 100%; height: 1080px; overflow: hidden; margin: auto; }
.div2 { background: url("a4.png") center center no-repeat; background-attachment: fixed; background-size: cover; }
</style>