带平行视差效果的星星

先看效果：

如果下方未出现效果也可前往这里查看 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: 0;}.wall{position: absolute;top: 0;left: 0;bottom: 0;right: 0;}div#background{background: black url('img/background.png') repeat-x 5% 0%;}div#midground{background:url('img/midground.png')repeat 20% 0%;z-index: 1;}div#foreground{background:url('img/foreground.png')repeat 35% 0%;z-index: 2;}</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 5% 0%;
    -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 20% 0%;z-index: 1;-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 35% 0%;z-index: 2;-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 5% 0%;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

转载于:https://www.cnblogs.com/Wayou/p/movingstats.html

CSS3 Animation制作飘动的浮云和星星效果相关推荐

css3蒲公英飘动效果_CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星先看效果: 下面我们利用CSS3的animation写出这样的动画来,要点就是: 用动画不停改变背景图片位置; 动画高为无限循环; 在页面放三个DIV,首先将他们大小铺满整个窗口 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
CSS3 animation实现点点点loading动画
一.再续前缘去年夏天,写了篇名为"CSS3 animation渐进实现点点点等待提示效果"的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实 ...
用html怎么制作风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
CSS3 Animation（下）
三.animation-timing-function: 语法: animation-timing-function:ease | linear | ease-in | ease- ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
2.HTML+CSS制作一闪一闪亮晶晶的星星（stars）
2.HTML+CSS制作一闪一闪亮晶晶的星星(stars) 效果地址:https://codepen.io/flyingliao/pen/NJxbdB?editors=1100 HTML code: ...

CSS3 Animation制作飘动的浮云和星星效果

带平行视差效果的星星

飘动的浮云

代码下载

REFERENCE

CSS3 Animation制作飘动的浮云和星星效果相关推荐

最新文章

热门文章