1

このチュートリアルを、私が達成しようとしていることに使用できるものに変更する際に問題が発生しています。http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

雲を泡に変えて、左から右ではなく下から上にしたいと思います。

それはバックグラウンドに非常に奇妙なことをしています...バブルとともにBGグラデーションを移動している理由を特定するのを手伝ってくれる人はいますか?

ここに私のCSSがあります

            body {
                /*To hide the horizontal scroller appearing during the animation*/
                overflow: hidden;
                background-image: linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
            background-image: -o-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
            background-image: -moz-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
            background-image: -webkit-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
            background-image: -ms-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);

            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0.21, #14C3F4),
              color-stop(0.9, #FCFCFC));
            }

            #clouds{
                padding: 100px 0;
            /*  background: #c9dbe9;
                background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
                background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
                background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);*/
            }

            /*Time to finalise the cloud shape*/
            .cloud {
                width: 60px; height: 60px;
                background: #fff;

                border-radius: 200px;
                -moz-border-radius: 200px;
                -webkit-border-radius: 200px;

                position: relative; 
            }



            /*Time to animate*/
            .x1 {
                -webkit-animation: moveclouds 15s linear infinite;
                -moz-animation: moveclouds 15s linear infinite;
                -o-animation: moveclouds 15s linear infinite;
            }

            /*variable speed, opacity, and position of clouds for realistic effect*/
            .x2 {
                left: 200px;

                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.6; /*opacity proportional to the size*/

                /*Speed will also be proportional to the size and opacity*/
                /*More the speed. Less the time in 's' = seconds*/
                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x3 {
                left: 350px; 

                -webkit-transform: scale(0.8);
                -moz-transform: scale(0.8);
                transform: scale(0.8);
                opacity: 0.8; /*opacity proportional to the size*/

                -webkit-animation: moveclouds 20s linear infinite;
                -moz-animation: moveclouds 20s linear infinite;
                -o-animation: moveclouds 20s linear infinite;
            }

            .x4 {
                left: 470px; 

                -webkit-transform: scale(0.75);
                -moz-transform: scale(0.75);
                transform: scale(0.75);
                opacity: 0.75; /*opacity proportional to the size*/

                -webkit-animation: moveclouds 18s linear infinite;
                -moz-animation: moveclouds 18s linear infinite;
                -o-animation: moveclouds 18s linear infinite;
            }

            .x5 {
                left: 150px; 

                -webkit-transform: scale(0.8);
                -moz-transform: scale(0.8);
                transform: scale(0.8);
                opacity: 0.8; /*opacity proportional to the size*/

                -webkit-animation: moveclouds 20s linear infinite;
                -moz-animation: moveclouds 20s linear infinite;
                -o-animation: moveclouds 20s linear infinite;
            }

            @-webkit-keyframes moveclouds {
                0% {margin-bottom: 1000px;}
                100% {margin-bottom: -1000px;}
            }
            @-moz-keyframes moveclouds {
                0% {margin-bottom: 1000px;}
                100% {margin-bottom: -1000px;}
            }
            @-o-keyframes moveclouds {
                0% {margin-bottom: 1000px;}
                100% {margin-bottom: -1000px;}
            }

そして私のHTML

            <div id="clouds">
                <div class="cloud x1"></div>
                <!-- Time for multiple clouds to dance around -->
                <div class="cloud x2"></div>
                <div class="cloud x3"></div>
                <div class="cloud x4"></div>
                <div class="cloud x5"></div>
            </div>
4

1 に答える 1

1

#雲 は泡が上に移動するにつれて崩壊しています. それが鎖で体を崩壊させる。これにより、背景が繰り返されるため、奇妙な背景のバグが発生します。

html、body、#clouds に 100% の高さを追加すると問題が解決します

ここにデモがあります: http://jsfiddle.net/Fmy7F/1/

于 2012-07-26T04:39:43.607 に答える