這是一個純粹的CSS

demonstration(改編自

tutorial),它依賴于動畫屬性.更新：感謝TonioElGringo,現(xiàn)在氣泡也會向側(cè)面移動,雖然運動是有節(jié)奏的,而不是隨機的：

html,

body,

#bubbles { height: 100% }

body { overflow: hidden }

#bubbles { padding: 100px 0 }

.bubble {

width: 60px;

height: 60px;

background: #ffb200;

border-radius: 200px;

-moz-border-radius: 200px;

-webkit-border-radius: 200px;

position: absolute;

}

.x1 {

-webkit-transform: scale(0.9);

-moz-transform: scale(0.9);

transform: scale(0.9);

opacity: 0.2;

-webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;

-moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;

-o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;

}

.x2 {

left: 200px;

-webkit-transform: scale(0.6);

-moz-transform: scale(0.6);

transform: scale(0.6);

opacity: 0.5;

-webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;

-moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;

-o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;

}

.x3 {

left: 350px;

-webkit-transform: scale(0.8);

-moz-transform: scale(0.8);

transform: scale(0.8);

opacity: 0.3;

-webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

-moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

-o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

}

.x4 {

left: 470px;

-webkit-transform: scale(0.75);

-moz-transform: scale(0.75);

transform: scale(0.75);

opacity: 0.35;

-webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;

-moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;

-o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;

}

.x5 {

left: 150px;

-webkit-transform: scale(0.8);

-moz-transform: scale(0.8);

transform: scale(0.8);

opacity: 0.3;

-webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;

-moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;

-o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;

}

@-webkit-keyframes moveclouds {

0% {

top: 500px;

}

100% {

top: -500px;

}

}

@-webkit-keyframes sideWays {

0% {

margin-left:0px;

}

100% {

margin-left:50px;

}

}

@-moz-keyframes moveclouds {

0% {

top: 500px;

}

100% {

top: -500px;

}

}

@-moz-keyframes sideWays {

0% {

margin-left:0px;

}

100% {

margin-left:50px;

}

}

@-o-keyframes moveclouds {

0% {

top: 500px;

}

100% {

top: -500px;

}

}

@-o-keyframes sideWays {

0% {

margin-left:0px;

}

100% {

margin-left:50px;

}

}

總結(jié)

以上是生活随笔為你收集整理的css3如何向上_html5 – 使用CSS3不断向上动画气泡？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。