div+css实现水中气泡上浮动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现水中气泡上浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, #4291d1, #021d33);
}
.bubbles {
position: absolute;
width: 120vw;
height: 100vh;
left: -10vw;
}
.bubble {
position: absolute;
top: -5vmin;
}
.bubble:nth-child(1) {
opacity: 0.57;
width: 16px;
height: 16px;
left: 80.4vw;
animation: fall-1 48s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(1) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-1 {
7.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9.3vw;
}
}
.bubble:nth-child(2) {
opacity: 0.01;
width: 6px;
height: 6px;
left: 9.7vw;
animation: fall-2 24s -19.5s ease-in infinite reverse;
}
.bubble:nth-child(2) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-2 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 92.1vw;
}
}
.bubble:nth-child(3) {
opacity: 0.18;
width: 14px;
height: 14px;
left: 104.1vw;
animation: fall-3 60s -3s ease-in infinite reverse;
}
.bubble:nth-child(3) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-3 {
1.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9.6vw;
}
}
.bubble:nth-child(4) {
opacity: 0.46;
width: 8px;
height: 8px;
left: 109.8vw;
animation: fall-4 12s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(4) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-4 {
6.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 117.3vw;
}
}
.bubble:nth-child(5) {
opacity: 0.5;
width: 14px;
height: 14px;
left: 0.4vw;
animation: fall-5 60s -24s ease-in infinite reverse;
}
.bubble:nth-child(5) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-5 {
5.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 20vw;
}
}
.bubble:nth-child(6) {
opacity: 0.63;
width: 18px;
height: 18px;
left: 23.8vw;
animation: fall-6 12s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(6) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-6 {
5.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 42.5vw;
}
}
.bubble:nth-child(7) {
opacity: 0.43;
width: 16px;
height: 16px;
left: 55.8vw;
animation: fall-7 36s -30s ease-in infinite reverse;
}
.bubble:nth-child(7) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-7 {
5.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 7.3vw;
}
}
.bubble:nth-child(8) {
opacity: 0.6;
width: 20px;
height: 20px;
left: 12.3vw;
animation: fall-8 60s -15s ease-in infinite reverse;
}
.bubble:nth-child(8) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-8 {
1.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 53.5vw;
}
}
.bubble:nth-child(9) {
opacity: 0.06;
width: 14px;
height: 14px;
left: 31.4vw;
animation: fall-9 48s -4.5s ease-in infinite reverse;
}
.bubble:nth-child(9) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-9 {
4.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 36.5vw;
}
}
.bubble:nth-child(10) {
opacity: 0.41;
width: 14px;
height: 14px;
left: 58vw;
animation: fall-10 36s -9s ease-in infinite reverse;
}
.bubble:nth-child(10) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-10 {
7.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 98.6vw;
}
}
.bubble:nth-child(11) {
opacity: 0.31;
width: 16px;
height: 16px;
left: 48.7vw;
animation: fall-11 36s -18s ease-in infinite reverse;
}
.bubble:nth-child(11) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-11 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 30.9vw;
}
}
.bubble:nth-child(12) {
opacity: 0.27;
width: 12px;
height: 12px;
left: 14.8vw;
animation: fall-12 60s -33s ease-in infinite reverse;
}
.bubble:nth-child(12) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-12 {
4.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 97.7vw;
}
}
.bubble:nth-child(13) {
opacity: 0.43;
width: 8px;
height: 8px;
left: 61.8vw;
animation: fall-13 12s -10.5s ease-in infinite reverse;
}
.bubble:nth-child(13) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-13 {
4.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 59.3vw;
}
}
.bubble:nth-child(14) {
opacity: 0.24;
width: 14px;
height: 14px;
left: 105.1vw;
animation: fall-14 24s -12s ease-in infinite reverse;
}
.bubble:nth-child(14) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-14 {
4.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 92.1vw;
}
}
.bubble:nth-child(15) {
opacity: 0.57;
width: 18px;
height: 18px;
left: 2.5vw;
animation: fall-15 36s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(15) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-15 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 107.1vw;
}
}
.bubble:nth-child(16) {
opacity: 0.05;
width: 16px;
height: 16px;
left: 114.4vw;
animation: fall-16 60s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(16) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-16 {
4.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 66.5vw;
}
}
.bubble:nth-child(17) {
opacity: 0.51;
width: 20px;
height: 20px;
left: 44.9vw;
animation: fall-17 48s -18s ease-in infinite reverse;
}
.bubble:nth-child(17) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-17 {
7.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 57.6vw;
}
}
.bubble:nth-child(18) {
opacity: 0.75;
width: 14px;
height: 14px;
left: 43.9vw;
animation: fall-18 60s -12s ease-in infinite reverse;
}
.bubble:nth-child(18) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-18 {
0.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 16.7vw;
}
}
.bubble:nth-child(19) {
opacity: 0.26;
width: 14px;
height: 14px;
left: 42.4vw;
animation: fall-19 60s -9s ease-in infinite reverse;
}
.bubble:nth-child(19) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-19 {
2.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 97.6vw;
}
}
.bubble:nth-child(20) {
opacity: 0.51;
width: 8px;
height: 8px;
left: 37.8vw;
animation: fall-20 24s -3s ease-in infinite reverse;
}
.bubble:nth-child(20) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-20 {
7.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 114.6vw;
}
}
.bubble:nth-child(21) {
opacity: 0.21;
width: 4px;
height: 4px;
left: 40.9vw;
animation: fall-21 60s -30s ease-in infinite reverse;
}
.bubble:nth-child(21) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-21 {
8.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 59.1vw;
}
}
.bubble:nth-child(22) {
opacity: 0.68;
width: 20px;
height: 20px;
left: 33.2vw;
animation: fall-22 12s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(22) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-22 {
3.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 52.6vw;
}
}
.bubble:nth-child(23) {
opacity: 0.88;
width: 8px;
height: 8px;
left: 76vw;
animation: fall-23 60s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(23) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-23 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 55.3vw;
}
}
.bubble:nth-child(24) {
opacity: 0.25;
width: 2px;
height: 2px;
left: 105.6vw;
animation: fall-24 36s -27s ease-in infinite reverse;
}
.bubble:nth-child(24) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-24 {
5.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 27.4vw;
}
}
.bubble:nth-child(25) {
opacity: 0.08;
width: 8px;
height: 8px;
left: 115.7vw;
animation: fall-25 48s -13.5s ease-in infinite reverse;
}
.bubble:nth-child(25) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-25 {
0.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9.2vw;
}
}
.bubble:nth-child(26) {
opacity: 0.55;
width: 18px;
height: 18px;
left: 108.5vw;
animation: fall-26 24s -4.5s ease-in infinite reverse;
}
.bubble:nth-child(26) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-26 {
3.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 41.1vw;
}
}
.bubble:nth-child(27) {
opacity: 0.58;
width: 14px;
height: 14px;
left: 98.5vw;
animation: fall-27 60s -3s ease-in infinite reverse;
}
.bubble:nth-child(27) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-27 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 40.3vw;
}
}
.bubble:nth-child(28) {
opacity: 0.85;
width: 18px;
height: 18px;
left: 31vw;
animation: fall-28 48s -25.5s ease-in infinite reverse;
}
.bubble:nth-child(28) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-28 {
3.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 94.1vw;
}
}
.bubble:nth-child(29) {
opacity: 0.44;
width: 4px;
height: 4px;
left: 65.9vw;
animation: fall-29 60s -25.5s ease-in infinite reverse;
}
.bubble:nth-child(29) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-29 {
5.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 41.4vw;
}
}
.bubble:nth-child(30) {
opacity: 0.72;
width: 10px;
height: 10px;
left: 88.9vw;
animation: fall-30 24s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(30) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-30 {
2.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 10.5vw;
}
}
.bubble:nth-child(31) {
opacity: 0.08;
width: 4px;
height: 4px;
left: 24.4vw;
animation: fall-31 60s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(31) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-31 {
3% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 107.7vw;
}
}
.bubble:nth-child(32) {
opacity: 0.45;
width: 14px;
height: 14px;
left: 3.1vw;
animation: fall-32 24s -13.5s ease-in infinite reverse;
}
.bubble:nth-child(32) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-32 {
2% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 5.1vw;
}
}
.bubble:nth-child(33) {
opacity: 0.09;
width: 6px;
height: 6px;
left: 40.3vw;
animation: fall-33 36s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(33) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-33 {
6.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 8.2vw;
}
}
.bubble:nth-child(34) {
opacity: 0.71;
width: 10px;
height: 10px;
left: 34vw;
animation: fall-34 24s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(34) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-34 {
5.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 39.3vw;
}
}
.bubble:nth-child(35) {
opacity: 0.07;
width: 20px;
height: 20px;
left: 18.4vw;
animation: fall-35 36s -15s ease-in infinite reverse;
}
.bubble:nth-child(35) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-35 {
2.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 70.1vw;
}
}
.bubble:nth-child(36) {
opacity: 0.23;
width: 18px;
height: 18px;
left: 55vw;
animation: fall-36 36s -25.5s ease-in infinite reverse;
}
.bubble:nth-child(36) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-36 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 26.6vw;
}
}
.bubble:nth-child(37) {
opacity: 0.82;
width: 6px;
height: 6px;
left: 50vw;
animation: fall-37 24s -6s ease-in infinite reverse;
}
.bubble:nth-child(37) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-37 {
6% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 68.1vw;
}
}
.bubble:nth-child(38) {
opacity: 0.55;
width: 8px;
height: 8px;
left: 46.9vw;
animation: fall-38 48s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(38) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-38 {
1.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 75.8vw;
}
}
.bubble:nth-child(39) {
opacity: 0.63;
width: 14px;
height: 14px;
left: 66.3vw;
animation: fall-39 48s -24s ease-in infinite reverse;
}
.bubble:nth-child(39) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-39 {
0.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 113.3vw;
}
}
.bubble:nth-child(40) {
opacity: 0.17;
width: 6px;
height: 6px;
left: 118.5vw;
animation: fall-40 60s -3s ease-in infinite reverse;
}
.bubble:nth-ch.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0