先上效果图, emmm, 图是静态的, 至于动态效果自己下载代码实现就好啦!
星空
设计思路
用绝对定位 (position:absolute) 为不同的图设置层级
动态实现用到 CSS 的动画效果
上代码
html 代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 星空 - 网页背景音乐动画
- </title>
- <link rel="stylesheet" href="css/index.css" />
- </head>
- <body>
- <!-- music -->
- <audio controls autoplay>
- <source src="mp3 / 安瀬聖 - 静謐. mp3" autoplay="autoplay" loop="loop">
- </audio>
- <div id="background" class="wall">
- </div>
- <div id="midground" class="wall">
- </div>
- <div id="foreground" class="wall">
- </div>
- <div id="top" class="wall">
- </div>
- <div id="ship" class="wall">
- </div>
- </body>
- </HTML>
HTML 代码很简单, 就不说明什么了! 主要注意一下 < audio > 的用法
CSS 代码:
- HTML,body{
- margin: 0;
- padding: 0;
- }
- audio{
- z-index: 5;
- position: absolute;
- bottom: 0;
- /* 设置元素的不透明度 */
- opacity: 0.1;
- /* 过渡, 2s 透明度从 1 过渡到 0.1 */
- transition: all 2s linear;
- }
- audio:hover{
- opacity: 1;
- }
- .wall{/* 全屏拉伸, 覆盖整个屏幕 */
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- }
- div#background{
- background: url("../images/preview.jpg") no-repeat;
- animation: dd 100s linear infinite;
- background-size: cover;
- }
- div#midground{
- background: url("../images/midground.png");
- z-index: 1;
- /* 动画的名称, 完成动画的时间 */
- animation: cc 100s linear infinite ;
- }
- div#foreground{
- background: url("../images/foreground.png");
- /* 设置元素的堆叠, 高的在低的前面(DIV 之间堆叠起来) */
- z-index: 2;
- /* linear 表示匀速, infinite 表示让动画无限次播放 */
- animation: cc 153s linear infinite;
- }
- div#top{
- background: url("../images/midground.png");
- z-index: 4;
- animation: da 100s linear infinite;
- }
- div#ship{
- /* 这里我们都没有设置图片的大小, 所以用的是默认是的大小(补充: 拉伸后是图片铺满整个屏幕?) */
- background: url("../images/ship.png") no-repeat;
- z-index: 2; /* 一般是在 absolute 覆盖 absolute 时, 才用 z-index */
- animation: cc 50s linear infinite;
- opacity: 0.6;
- }
- /* 定义动画的效果, 名字叫 cc */
- @keyframes cc {
- 0%{/* 动画的开始 */
- background-position: 0 0; /* 动画开始时, 背景的位置 */
- }
- 100%{/* 动画的结束 */
- /* 为什么设置时间那么长和结束位置那么远呢. 因为这样可以让水平和竖直方向的动画落差更明显 */
- background-position: 600% 0;
- }
- }
- @keyframes da {
- 0%{
- background-position: 0 0;
- }
- 100%{
- /* 相同的时间, 不同的结束位置, 动画的速度会不一样, 根据公式 v=s/t */
- background-position: 0 600%;
- }
- }
CSS 这里还是有挺多值得学习的地方的, 以下将分点学习:
全屏拉伸的实现
- .wall{/* 全屏拉伸, 覆盖整个屏幕 */
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- }
就是这一段代码, 绝对定位把四个方向的属性值均设置为 0 即可实现全屏拉伸, 至于原理, 笔者在这里推荐一篇文章帮助大家理解啦!
链接: https://www.jianshu.com/p/a3da5e27d22b
z-index 设置元素的堆叠
- div#foreground{
- background: url("../images/foreground.png");
- /* 设置元素的堆叠, 高的在低的前面(DIV 之间堆叠起来) */
- z-index: 2;
- /* linear 表示匀速, infinite 表示让动画无限次播放 */
- animation: cc 153s linear infinite;
- }
这里设置 z-index: 2; 可以理解为这个 div 从里到外被放在了第二层. z-index 一般应该在什么时候用呢? 一般是在 absolute 覆盖 absolute 时, 才用 z-index.
动画效果的实现
动画效果的实现主要是用到 animation 和 @keyframs, 其中 animation 定义动画的名称, 时间与播放的次数等;@keyframs 则是定义动画的效果
- div#ship{
- /* 这里我们都没有设置图片的大小, 所以用的是默认是的大小(补充: 拉伸后是图片铺满整个屏幕?) */
- background: url("../images/ship.png") no-repeat;
- z-index: 2; /* 一般是在 absolute 覆盖 absolute 时, 才用 z-index */
- animation: cc 50s linear infinite;
- opacity: 0.6;
- }
- /* 定义动画的效果, 名字叫 cc */
- @keyframes cc {
- 0%{/* 动画的开始 */
- background-position: 0 0; /* 动画开始时, 背景的位置 */
- }
- 100%{/* 动画的结束 */
- /* 为什么设置时间那么长和结束位置那么远呢. 因为这样可以让水平和竖直方向的动画落差更明显 */
- background-position: 600% 0;
- }
- }
哈哈, 这里还是想推荐大家看一下阮一锋写的 CSS 动画简介, 笔记看了感觉收获颇多的.
链接: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
4. 想下载源码的同学看这里!!!
链接: https://pan.baidu.com/s/1tiuHEk_dWw8J0sd66Cl3Gw
提取码: u8ld
来源: http://www.jianshu.com/p/0de7dc1ac77f