带平行视差效果的星星

先看效果：

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

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

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

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

<!doctype html>

<html>

    <head>

        <title>Moving stars</title>

        <style type="text/css">

        	html,body{

        	        margin: ;

        	}

	        .wall{

		        position: absolute;

		        top: ;

		        left: ;

		        bottom: ;

		        right: ;

	        }

	        div#background{

	        	background: black url('img/background.png') repeat-x % %;

	        }

	        div#midground{

		        background:url('img/midground.png')repeat % %;

		        z-index: ;

	        }

	        div#foreground{

		        background:url('img/foreground.png')repeat % %;

		        z-index: ;

	        }

        </style>

    </head>

    <body>

        <div id="background" class="wall"></div>

        <div id="midground" class="wall"></div>

        <div id="foreground" class="wall"></div>

    </body>

</html>

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

@-webkit-keyframes STAR-MOVE {

	from {

		background-position:0% 0%

	}

	to {

		background-position: 600% 0%

	}

}

@keyframes STAR-MOVE {

	from {

		background-position: 0% 0%

	}

	to {

		background-position: 600% 0%

	}

}

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

div#background {

    background: black url('img/background.png') repeat-x % %;

    -webkit-animation: STAR-MOVE 200s linear infinite;

    -moz-animation: STAR-MOVE 200s linear infinite;

    -ms-animation: STAR-MOVE 200s linear infinite;

    animation: STAR-MOVE 200s linear infinite;

}

div#midground {

    background: url('img/midground.png')repeat % %;

    z-index: ;

    -webkit-animation: STAR-MOVE 100s linear infinite;

    -moz-animation: STAR-MOVE 100s linear infinite;

    -ms-animation: STAR-MOVE 100s linear infinite;

    animation: STAR-MOVE 100s linear infinite;

}

div#foreground {

    background: url('img/foreground.png')repeat % %;

    z-index: ;

    -webkit-animation: STAR-MOVE 50s linear infinite;

    -moz-animation: STAR-MOVE 50s linear infinite;

    -ms-animation: STAR-MOVE 50s linear infinite;

    animation: STAR-MOVE 50s linear infinite;

}

飘动的浮云

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

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

div#background {

    background: black url('img/background.png') repeat-x % %;

    background-size: cover;

    -webkit-animation: STAR-MOVE 200s linear infinite;

    -moz-animation: STAR-MOVE 200s linear infinite;

    -ms-animation: STAR-MOVE 200s linear infinite;

    animation: STAR-MOVE 200s linear infinite;

}

下面嵌入的貌似效果不太好，还是打开链接全屏查看吧，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. 【学习篇：他山之石，把玉攻】Ajax请求安全性讨论

    在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...

  2. WebStorm 2016.2 破解方法

    http://www.jetbrains.com/ 以前的 http://idea.lanyus.com/ 不能激活了 有帖子说的 http://15.idea.lanyus.com/ http:// ...

  3. 深入理解Java：SimpleDateFormat安全的时间格式化

    这一篇我什么都不写,只推荐一篇大牛的博客,这篇博客给了我很多灵感,让我对多线程理解的更加透彻了; http://www.cnblogs.com/chenying99/articles/3331950. ...

  4. 【大数据技巧】日均2TB日志数据在线快速处理之法

    [大数据技巧]日均2TB日志数据在线快速处理之法 http://click.aliyun.com/m/8958/

  5. selenium使用Xpath定位之完整篇

    其中有一片文章提到了xpath元素定位,但是该文章中有些并不能适应一些特殊与个性化的场景.在文本中提供xpath元素的定位终极篇,你一定能在这里找到你需要的解决办法. 第一种方法: 通过绝对路径做定位 ...

  6. 工厂模式模拟Spring的bean加载过程

    一.前言    在日常的开发过程,经常使用或碰到的设计模式有代理.工厂.单例.反射模式等等.下面就对工厂模式模拟spring的bean加载过程进行解析,如果对工厂模式不熟悉的,具体可以先去学习一下工厂 ...

  7. Android api SmsMessage类createFromPdu(byte[] pdu) is depracted(不推荐使用,过时的)

    我想实现一个,监听功能--当手机收到相关短信,触发一些时间,程序中 SmsMessage smsMessage = SmsMessage.createFromPdu((byte[]) obj); cr ...

  8. 由overflow-x:scroll产生的收获

    我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...

  9. 初探javascript

    javascript是一种在网络广泛应用的脚本语言,虽然名字与java相近,但其实两者并没有直接的关系,脚本语言是一种为了便于操作和拓展功能而开发出来的解释性语言,不同于传统的编程语言,脚本语言不需要 ...

  10. AMD与CMD（转载）

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...