带平行视差效果的星星

先看效果：

如果下方未出现效果也可前往这里查看 http://sandbox.runjs.cn/show/0lz3sl9y

下面我们利用CSS3的animation写出这样的动画来，要点就是：

  • 用动画不停改变背景图片位置;
  • 动画高为无限循环;

在页面放三个DIV，首先将他们大小铺满整个窗口，这点是通过将其position设为absolute然后分别设置上左下右四个方面距离为0px达到的。

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Moving stars</title>
  5.         <style type="text/css">
  6.         	html,body{
  7.         	        margin: ;
  8.         	}
  9. 	        .wall{
  10. 		        position: absolute;
  11. 		        top: ;
  12. 		        left: ;
  13. 		        bottom: ;
  14. 		        right: ;
  15. 	        }
  16. 	        div#background{
  17. 	        	background: black url('img/background.png') repeat-x % %;
  18. 	        }
  19. 	        div#midground{
  20. 		        background:url('img/midground.png')repeat % %;
  21. 		        z-index: ;
  22. 	        }
  23. 	        div#foreground{
  24. 		        background:url('img/foreground.png')repeat % %;
  25. 		        z-index: ;
  26. 	        }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div id="background" class="wall"></div>
  31.         <div id="midground" class="wall"></div>
  32.         <div id="foreground" class="wall"></div>
  33.     </body>
  34. </html>

然后定义的们的动画，让背景图片的位置从开始的0%变化到600%，注意我们只改变x方向的位置，y保持0%不变，因为我们想要的效果是水平移动，所以y方向无变化。

  1. @-webkit-keyframes STAR-MOVE {
  2. 	from {
  3. 		background-position:0% 0%
  4. 	}
  5. 	to {
  6. 		background-position: 600% 0%
  7. 	}
  8. }
  9. @keyframes STAR-MOVE {
  10. 	from {
  11. 		background-position: 0% 0%
  12. 	}
  13. 	to {
  14. 		background-position: 600% 0%
  15. 	}
  16. }

最后一步便是将动画关键帧应用到三个充当背景的DIV上。

  1. div#background {
  2.     background: black url('img/background.png') repeat-x % %;
  3.     -webkit-animation: STAR-MOVE 200s linear infinite;
  4.     -moz-animation: STAR-MOVE 200s linear infinite;
  5.     -ms-animation: STAR-MOVE 200s linear infinite;
  6.     animation: STAR-MOVE 200s linear infinite;
  7. }
  8. div#midground {
  9.     background: url('img/midground.png')repeat % %;
  10.     z-index: ;
  11.     -webkit-animation: STAR-MOVE 100s linear infinite;
  12.     -moz-animation: STAR-MOVE 100s linear infinite;
  13.     -ms-animation: STAR-MOVE 100s linear infinite;
  14.     animation: STAR-MOVE 100s linear infinite;
  15. }
  16. div#foreground {
  17.     background: url('img/foreground.png')repeat % %;
  18.     z-index: ;
  19.     -webkit-animation: STAR-MOVE 50s linear infinite;
  20.     -moz-animation: STAR-MOVE 50s linear infinite;
  21.     -ms-animation: STAR-MOVE 50s linear infinite;
  22.     animation: STAR-MOVE 50s linear infinite;
  23. }

飘动的浮云

如果把上面的星星图片换成云彩，那就成了飘动的浮云了。

代码需要小的改动，就是背景层需要设置background-size为cover，这样才能让蓝天铺满窗口。

  1. div#background {
  2.     background: black url('img/background.png') repeat-x % %;
  3.     background-size: cover;
  4.     -webkit-animation: STAR-MOVE 200s linear infinite;
  5.     -moz-animation: STAR-MOVE 200s linear infinite;
  6.     -ms-animation: STAR-MOVE 200s linear infinite;
  7.     animation: STAR-MOVE 200s linear infinite;
  8. }

下面嵌入的貌似效果不太好，还是打开链接全屏查看吧，http://sandbox.runjs.cn/show/zgvynqhj。

代码下载

度娘盘：http://pan.baidu.com/s/1sj0KHmX

REFERENCE

http://css-tricks.com/examples/StarryNightCSS3/

http://www.techumber.com/2013/12/amazing-glitter-star-effect-using-pure-css3.html

CSS3 Animation制作飘动的浮云和星星效果的更多相关文章

  1. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  2. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  3. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  4. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  5. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  6. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  7. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  8. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  9. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

随机推荐

  1. KeyedPriorityQueue

    // <copyright file="KeyedPriorityQueue.cs" company="Microsoft">Copyright ( ...

  2. 友盟推送 .NET (C#) 服务端 SDK rest api 调用库

    友盟推送 .NET SDK rest api 介绍 该版本是基于友盟推送2.3版本封装的,网上查询了下发现没有.NET版本的调用库,官方也没有封装.NET的版本,只有python.java.php版本 ...

  3. CozyRSS开发记录15-获取和显示RSS内容

    CozyRSS开发记录15-获取和显示RSS内容 1.内容列表 我们先给RSSContentFrame增加一个ViewModel,里面和RSS源列表一样,提供一个ObservableCollectio ...

  4. Scrapy框架实现爬虫

    实战中的遇到的问题总结: 1.

  5. hive学习笔记

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. Python3的tkinter写一个简单的小程序

    一.这个学期开始学习python,但是看了python2和python3,最后还是选择了python3 本着熟悉python的原因,并且也想做一些小程序来增加自己对python的熟练度.所以写了一个简 ...

  7. 大家都在用PDA条码扫描枪管理企业仓库 PDA无线数据采集程序

    PDA数据采集器又称之为手持终端,这些都是用于扫描货物条码统计数据用的,PDA扫描枪有效提高企业仓库管理,在仓库管理中引入条码技术,对仓库的到货检验.入库.出库.调拨.移库移位.库存盘点等各个作业环节 ...

  8. Unity 依赖注入之一

    在项目中引入Unity,建立一个接口IWork跟一个继承IWork接口的Work类 public interface IMyWork { void Work(); } public class MyW ...

  9. OSG消息机制之事件处理概述

    OSG的消息机制包括好多个头文件预定义及多个类. 首先,消息接收相关的类当属osgGA::GUIEventHandler和osgGA::GUIEventAdapter这两个类了.前者处理OSG程序与用 ...

  10. 每天一个linux命令--定时启动

    1.设置启动的时间,输入crontab -e命令 设置一种编辑器,进入编辑界面,设置启动的时间为每5分钟启动一次wanghy.sh脚本 # m h dom mon dow command # */ * ...