综合编程

CSS3 or HTML5 – how do i do a background animation like clouds floating in HTML5 pages?

微信扫一扫,分享到朋友圈

CSS3 or HTML5 – how do i do a background animation like clouds floating in HTML5 pages?
0

I am just wondering whether there is a way to do a background animations in pure CSS3
based design may be with little bit of a HTML5 or jquery ?

i can see some people do this

http://addtwitter-followers.com/

is there easy way to do this in CSS3
?

Problem courtesy of: mahen3d

Solution



Fiddle DEMO

CSS

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-ms-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-moz-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
#wrap {
    height:100%;
    width:100%;
    background: url(http://addtwitter-followers.com/wp-content/themes/twentyten/images/bck.jpg) top no-repeat #94E3F4;
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 150s linear infinite;
    -ms-animation: animatedBackground 150s linear infinite;
    -moz-animation: animatedBackground 150s linear infinite;
    -webkit-animation: animatedBackground 150s linear infinite;
}

HTML

<div id="wrap">...</div>

References

@keyframes

animation:

animations

Solution courtesy of: Tushar Gupta

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...

CSS3 Recipes

Warning — May Contain Traces of AI

上一篇

【财报季】51Talk2018年Q4净营收2.98亿,2019年将加速城市下沉

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
CSS3 or HTML5 – how do i do a background animation like clouds floating in HTML5 pages?

长按储存图像,分享给朋友