基于html5页面滚动背景图片动画效果
2024-09-25 18:37:33
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码。效果图如下：
实现的代码。
html代码：
<div id="fullpage">
<div class="first section">
<div class="container">
<div class="phonesblock">
<div class="phones">
<img src="img/phone1.png" alt="" class="phone1" />
<img src="img/phone2.png" alt="" class="phone2" />
</div>
</div>
<div class="downblock">
<div class="downwrap">
<img src="img/down2.png" alt="" class="down" />
</div>
</div>
<div class="star">
<div class="vline"></div>
<img src="img/star2.png" alt="" />
</div>
<div class="androiddown"></div>
</div>
</div>
<div class="second section">
<div class="container">
<div class="hablock">
<div class="starmoon">
<img src="img/star-moon.png" alt="" />
</div>
<div class="help">
<img id="help" src="img/help.png" alt="" />
<div class="pop4">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent4.png" alt="" />
</div>
</div>
<div class="answer">
<div class="answers">
<div class="pop1">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent1.png" alt="" />
</div>
<div class="pop2">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent2.png" alt="" />
</div>
<div class="pop3">
<img src="img/pop2.png" alt="" />
<img src="img/popcontent3.png" alt="" />
</div>
</div>
<div class="pillows">
<img src="img/pillows.png" />
</div>
</div>
</div>
<div class="yewenblock">
<div class="yewen">
<div class="title">夜问？</div>
<div class="content">
<p>
你的一个问题，<br />
成就了这么多的大湿！<br />
无论是情感困惑 <br />
还是十万个为什么，<br />
这里都有人回应你！<br />
</p>
</div>
</div>
</div>
<div class="ball">
<div class="vline"></div>
<img src="img/ball.png" />
</div>
</div>
</div>
<div class="third section">
<div class="container">
<div class="goodnight">
<div class="hearttalk">
<img class="talk" src="img/hearttalk.png" />
<img class="gn" src="img/goodnight.png" alt="" />
</div>
</div>
<div class="yehuablock">
<div class="yehua">
<div class="title">夜话 </div>
<div class="content">
<p>
你的一句情话，<br />
不知戳到了多少人的心！<br />
说情话喝鸡汤聊八卦，<br />
谁让练习的妹子太单纯！<br />
</p>
</div>
</div>
</div>
<div class="smile">
<div class="vline"></div>
<img src="img/smile-on-2.png" />
</div>
</div>
</div>
<div class="fourth section">
<div class="container">
<div class="connblock">
<div class="connection">
<div class="bg1"><img src="img/connbg1.png" alt="" /></div>
<div class="bg2"><img src="img/connbg2.png" alt="" /></div>
<div class="connwrap">
<div class="f2b">
<img src="img/f2.png" alt="" class="f2" />
</div>
<div class="f3b">
<div class="f3wrap">
<img src="img/f3.png" alt="" class="f3" />
</div>
</div>
<div class="f1b">
<img src="img/f1.png" alt="" class="f1" />
</div>
</div>
</div>
</div>
<div class="fujinblock">
<div class="fujin">
<div class="title">附近</div>
<div class="content">
<p>
我靠，<br />
原来我的邻居也这么寂寞！<br />
发现附近未知的声音，<br />
你离Ta只差一个练习！<br />
</p>
</div>
</div>
<div class="loc">
<div class="vline"></div>
<img src="img/loc.png" alt="" />
</div>
</div>
</div>
</div>
<div class="fifth section">
<div class="aboveblock">
<div class="above"></div>
<div class="center">
<div class="housewrap">
<img src="img/house.png" alt="" class="house" />
<div class="cloud">
<img src="img/cloud2.png" alt="" />
</div>
<div class="lunar">
<img src="img/lunar.png" alt="" />
</div>
</div>
</div>
</div>
<div class="footer">
<script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
</div>
</div>
</div>
最新文章
- HTML可编辑的select
- 进阶——scrapy登录豆瓣解决cookie传递问题并爬取用户参加过的同城活动©seven_clear
- Android Property Animation动画
- HTTP Servlet 重要的几个方法
- backBarButtonItem 替换
- Microsoft 2013 新技术学习笔记 四
- ZOJ 2112 Dynamic Rankings（主席树の动态kth）
- 王家林 Spark公开课大讲坛第一期：Spark把云计算大数据速度提高100倍以上
- Python for 循环 失效
- redis持久化与可用性
- Struts2学习笔记(十)——自定义拦截器
- 我喜欢的几款不错的vim插件
- 同一个dll 不同路径下注册 一个失败 一个成功
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
- day12-python的类
- AttributeError: 'module' object has no attribute 'X509_up_ref'
- Kafka学习之（六）搭建kafka集群
- English Words Type
- Day 28面向对象的进阶-内置函数（__new__,__del__）
- CF 1041 F. Ray in the tube