Html - 会动的云

Posted 2020-06-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html - 会动的云相关的知识，希望对你有一定的参考价值。

http://www.17sucai.com/download/9006.html

@-webkit-keyframes animate-cloud {
                from {
                    background-position: 600px 100%;
                }
                to {
                    background-position: 0 100%;
                }
            }
            
            @-moz-keyframes animate-cloud {
                from {
                    background-position: 600px 100%;
                }
                to {
                    background-position: 0 100%;
                }
            }
            
            @-ms-keyframes animate-cloud {
                from {
                    background-position: 600px 100%;
                }
                to {
                    background-position: 0 100%;
                }
            }
            
            @-o-keyframes animate-cloud {
                from {
                    background-position: 600px 100%;
                }
                to {
                    background-position: 0 100%;
                }
            }
            
            html {
                height: 100%;
            }
            
            body {
                background: url(../images/cloud.png) 0 bottom repeat-x #049ec4;
                -webkit-animation: animate-cloud 20s linear infinite;
                -moz-animation: animate-cloud 20s linear infinite;
                -ms-animation: animate-cloud 20s linear infinite;
                -o-animation: animate-cloud 20s linear infinite;
                animation: animate-cloud 20s linear infinite;
                width: 100%;
                height: auto;
            }

技术分享

以上是关于Html - 会动的云的主要内容，如果未能解决你的问题，请参考以下文章