css3蒲公英飘动效果_CSS3 Animation制作飘动的浮云和星星效果

带平行视差效果的星星

先看效果：

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

用动画不停改变背景图片位置;

动画高为无限循环;

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

Moving stars

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: ;

}

然后定义的们的动画，让背景图片的位置从开始的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;

}

代码下载

REFERENCE

css3 animation动画技巧

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

CSS3动画制作的简单示例

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

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

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

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

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

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

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

CSS3动画制作

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

css3 animation实现风车转动

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

css3 animation动画特效插件的巧用

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

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

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

随机推荐

Centos下ACL(访问控制列表)介绍(转)

我们知道,在Linux操作系统中,传统的权限管理分是以三种身份(属主.属組以及其它人)搭配三种权限(可读.可写以及可执行),并且搭配三种特殊权限(SUID,SGID,SBIT),来实现对系统的安全保护 ...

WCF学习笔记1--发布使用配置文件的服务

关于WCF的入门网上资料很多,可以参考蒋金楠老师的博客http://www.cnblogs.com/artech/archive/2007/02/26/656901.html,我是从这篇博客开始学习的 ...

捕获当前事件作用的对象event.target和event.srcElement

语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

关于《加密与解密》的读后感----对dump脱壳的一点思考

偶然翻了一下手机日历,原来今天是夏至啊,时间过的真快.ISCC的比赛已经持续了2个多月了,我也跟着比赛的那些题目学了2个月.......虽然过程很辛苦,但感觉还是很幸运的,能在大三的时候遇到ISCC, ...

示例-创建表格-指定行列&删除表格的行和列