css3如何向上_html5 – 使用CSS3不断向上动画气泡？
這是一個純粹的CSS
demonstration(改編自
tutorial),它依賴于動畫屬性.更新：感謝TonioElGringo,現在氣泡也會向側面移動,雖然運動是有節奏的,而不是隨機的：
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;
}
}
總結
以上是生活随笔為你收集整理的css3如何向上_html5 – 使用CSS3不断向上动画气泡？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win7如何确认是什么版本
- 下一篇： css设置一个div显示在另一个div的