css冒泡泡动画底部效果代码
代码语言：html
所属分类：动画
代码描述：css冒泡泡动画底部效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
*{margin:0;padding:0;list-style-type:none;}
body {
display: grid;
grid-template-rows: 1fr auto;
grid-template-areas: "main" "footer";
overflow-x: hidden;
background: #F5F7FA;
min-height: 100vh;
font-family: 'Open Sans', sans-serif;
}
body .footer {
z-index: 1;
--footer-background: #40b0f1;
display: grid;
position: relative;
grid-area: footer;
min-height: 12rem;
}
body .footer .bubbles {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1rem;
background: var(--footer-background);
-webkit-filter: url("#blob");
filter: url("#blob");
}
body .footer .bubbles .bubble {
position: absolute;
left: var(--position, 50%);
background: var(--footer-background);
border-radius: 100%;
-webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
}
body .footer .content {
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 4rem;
padding: 2rem;
background: #40b0f1;
}
body .footer .content a, body .footer .content p {
color: #F5F7FA;
text-decoration: none;
}
body .footer .content b {
color: white;
}
body .footer .content p {
margin: 0;
font-size: .75rem;
}
body .footer .content > div {
display: flex;
flex-direction: column;
justify-content: center;
}
body .footer .content > div > div {
margin: 0.25rem 0;
}
body .footer .content > div > div > * {
margin-right: .5rem;
}
body .footer .content > div .image {
align-self: center;
width: 4rem;
height: 4rem;
margin: 0.25rem 0;
background-size: cover;
background-position: center;
}
@-webkit-keyframes bubble-size {
0%, 75% {
width: var(--size, 4rem);
height: var(--size, 4rem);
}
100% {
width: 0rem;
height: 0rem;
}
}
@keyframes bubble-size {
0%, 75% {
width: var(--size, 4rem);
height: var(--size, 4rem);
}
100% {
width: 0rem;
height: 0rem;
}
}
@-webkit-keyframes bubble-move {
0% {
bottom: -4rem;
}
100% {
bottom: var(--distance, 10rem);
}
}
@keyframes bubble-move {
0% {
bottom: -4rem;
}
100% {
bottom: var(--distance, 10rem);
}
}
</style>
</head>
<body>
<div class="footer">
<div class="bubbles">
<div class="bubble" style="--size:3.7213421480238473rem; --distance:9.505346460759434rem; --position:40.22788841130817%; --time:2.5579428080835602s; --delay:-2.551388062067941s;"></div>
<div class="bubble" style="--size:5.500247300710568rem; --distance:6.2118813086522735rem; --position:87.07174911124845%; --time:3.7950243388260327s; --delay:-3.270237306503343s;"></div>
<div class="bubble" style="--size:2.3242940429011956rem; --distance:7.044944494811669rem; --position:101.28750378546107%; --time:2.629329053292902s; --delay:-2.4302631916260564s;"></div>
<div class="bubble" style="--size:5.368267979463531rem; --distance:6.984903032149823rem; --position:24.672901605467377%; --time:3.6922347100113684s; --delay:-2.7637748546263308s;"></div>
<div class="bubble" style="--size:2.308292712367696rem; --distance:7.240308566969028rem; --position:-2.2618473747363588%; --time:2.7783399326076745s; --delay:-2.422323317653233s;"></div>
<div class="bubble" style="--size:2.589049422686883rem; --distance:7.620168432414982rem; --position:57.960067264348396%; --time:3.1677481470068454s; --delay:-3.9895937435743383s;"></div>
<div class="bubble" style="--size:4.012494033150956rem; --distance:7.215070310722501rem; --position:103.90156330955398%; --time:3.581799241298079s; --delay:-3.2842101855509367s;"></div>
<div class="bubble" style="--size:5.486463553636168rem; --distance:8.178724244451335rem; --position:94.8496390776951%; --time:3.942288747270057s; --delay:-2.4935541596119926s;"></div>
<div class="bubble" style="--size:2.5838969336339064rem; --distance:8.512391306969278rem; --position:0.42123986082513554%; --time:2.1258922491501977s; --delay:-3.333826864507246s;"></div>
<div class="bubble" style="--size:5.079803260056025rem; --distance:6.388128560454028rem; --position:20.300017386843756%; --time:2.659418516406643s; --delay:-3.078550380210786s;"></div>
<div class="bubble" style="--size:3.6577705907998803rem; --distance:9.905163352149756rem; --position:-3.9018298355419367%; --time:3.2166315563669725s; --delay:-3.749328245209214s;"></div>
<div class="bubble" style="--size:2.2293257420881094rem; --distance:6.3675369567357185rem; --position:20.20898718445759%; --time:2.31254483043571s; --delay:-3.5507459589952064s;"></div>
<div class="bubble" style="--size:4.180004160345056rem; --distance:9.267635853498593rem; --position:96.60912315927816%; --time:3.1210635860440274s; --delay:-2.2517472307884163s;"></div>
<div class="bubble" style="--size:2.0066820744313763rem; --distance:7.817672455095477rem; --position:56.22441021925781%; --time:3.1747716675531716s; --delay:-3.989920132346828s;"></div>
<div class="bubble" style="--size:3.057806550977351rem; --distance:7.631286325199999rem; --position:53.439190329260384%; --time:2.538318608236518s; --delay:-3.6058974363494176s;"></div>
<div class="bubble" style="--size:5.153210319185682rem; --distance:6.748442380597138rem; --position:46.17466989898253%; --time:2.1432715254569605s; --delay:-2.4479428801056713s;"></div>
<div class="bubble" style="--size:2.98933774997945rem; --distance:8.666064909668048rem; --position:52.397769148841%; --time:3.8833002688420803s; --delay:-2.3399768430183183s;"></div>
<div class="bubble" style="--size:4.76341936376016rem; --distance:8.835404006581397rem; --position:83.40657411802158%; --time:2.3694877694487455s; --delay:-2.5515274663024976s;"></div>
<div class="bubble" style="--size:5.1595918171618855rem; --distance:9.786646387293258rem; --position:59.394174388666585%; --time:2.3760267516199907s; --delay:-2.0849342793522982s;"></div>
<div class="bubble" style="--size:4.429443953565971rem; --distance:7.575782798489372rem; --position:61.249755683418286%; --time:2.842353131011543s; --delay:-2.1027326065636345s;"></div>
<div class="bubble" style="--size:3.2144705898238275rem; --distance:9.087950458446308rem; --position:11.578968385739547%; --time:2.9795769810180297s; --delay:-3.516113904361346s;"></div>
<div class="bubble" style="--size:3.7066806965064094rem; --distance:9.436928894924051rem; --position:33.432023550513605%; --time:3.7613500043898074s; --delay:-3.53445226410586s;"></div>
<div class="bubble" style="--size:5.104383756779172rem; --distance:6.620940616235805rem; --position:-0.39255488604776456%; --time:3.5310311679177038s; --delay:-2.161171256635479s;"></div>
<div class="bubble" style="--size:2.9413132397930957rem; --distance:7.947766367749181rem; --position:65.25160647497219%; --time:3.2219451773698653s; --delay:-2.2569783138488404s;"></div>
<div class="bubble" style="--size:2.0686757597012067rem; --distance:9.893296163121473rem; --position:2.1134983030132286%; --time:2.7885612369031696s; --delay:-3.1196641649327104s;"></div>
<div class="bubble" style="--size:2.5749252792442308rem; --distance:8.66338452173652rem; --position:26.416830191268613%; --time:3.91957671849049s; --delay:-2.772278139472696s;"></div>
<div class="bubble" style="--size:2.4852892532083226rem; --distance:6.372980787806562rem; --position:81.69893117792282%; --time:3.079033426857241s; --delay:-2.2962941351541066s;"></div>
<div class="bubble" style="--size:5.5629607641353385rem; --distance:9.15017701520257rem; --position:3.105398966952176%; --time:3.8554306889400634s; --delay:-3.7866730609283232s;"></div>
<div class="bubble" style="--size:2.156331504196541rem; --distance:7.893943184322224rem; --position:29.941061639204904%; --time:3.7116694507976793s; --delay:-2.3337675677493954s;"></div>
<div class="bubble" style="--size:2.3215545411427385rem; --distance:9.004429773836247rem; --position:56.96669459182739%; --time:2.8864193873030617s; --delay:-3.578385350044105s;"></div>
<div class="bubble" style="--size:4.967042994441611rem; --distance:7.806617503673871rem; --position:27.904419423545683%; --time:3.1064701594693727s; --delay:-3.0952280145141877s;"></div>
<div class="bubble" style="--size:3.1923907792593242rem; --distance:6.366909375003944rem; --position:86.29562524283297%; --time:2.708956028455526s; --delay:-2.676118835629987s;"></div>
<div class="bubble" style="--size:2.8303927620487226rem; --distance:8.320021996730327rem; --position:57.044744087435625%; --time:3.8946154027139723s; --delay:-2.736024629506094s;"></div>
<div class="bubble" style="--size:4.840433976595762rem; --distance:7.124291394138918rem; --position:19.615879909260173%; --time:3.182682726127182s; --delay:-2.4383518393902364s;"></div>
<div class="bubble" style="--size:5.359738453378172rem; --distance:6.694070654732667rem; --position:-3.5304309415941915%; --time:2.3799895423072206s; --delay:-3.7871528366504954s;"></div>
<div class="bubble" style="--size:2.9172723450704963rem; --distance:7.219471945888807rem; --position:71.23776687031318%; --time:2.691815593023614s; --delay:-2.225664489249637s;"></div>
<div class="bubble" style="--size:2.4260549202674433rem; --distance:8.943991779712878rem; --position:-2.938815542903006%; --time:3.667901586848475s; --delay:-2.0318348941666984s;"></div>
<div class="bubble" style="--size:5.218428909922971rem; --distance:7.182218880714959rem; --position:47.599720118871986%; --time:3.1996277643035635s; --delay:-2.464039938715248s;"></div>
<div class="bubble" style="--size:4.564796444492704rem; --distance:8.913141460070921rem; --position:69.83741678384754%; --time:2.39189940545819s; --delay:-2.7063538327823906s;"></div>
<div class="bubble" style="--size:4.098964865677504rem; --distance:6.95039554834426rem; --position:40.157073574007555%; --time:2.275800428245597s; --delay:-2.2722033002581936s;"></div>
<div class="bubble" style="--size:4.599047497163818rem; --distance:9.377199757122415rem; --position:29.859268972166625%; --time:3.1570487162264005s; --delay:-3.7780660129491483s;"></div>
<div class="bubble" style="--size:5.812990480636346rem; --distance:9.101286142156095rem; --position:56.0338888659367%; --time:3.3562636721239847s; --delay:-3.4442407120291434s;"></div>
<div class="bubble" style="--size:5.483552302179455rem; --distance:8.417061474225672rem; --position:68.298840831868%; --time:2.428506649257031s; --delay:-2.36440965304464s;"></div>
<div class="bubble" style="--size:2.2990132709879783rem; --distance:9.105634132691563rem; --position:32.73888158484342%; --time:2.6526667425255837s; --delay:-2.997246613468293s;"></div>
<div class="bubble" style="--size:5.081841190111142rem; --distance:7.749104399277604rem; --position:82.88764394700121%; --time:3.4435901938197864s; --delay:-3.0643170692531396s;"></div>
<div class="bubble" style="--size:5.852384871348338rem; --distance:6.790080620464186rem; --position:88.84725368719968%; --time:3.559321194899361s; --delay:-2.3701954209883715s;"></div>
<div class="bubble" style="--size:2.6558378765008577rem; --distance:9.04095445363605rem; --position:80.35247944714001%; --time:3.3688096550555784s; --delay:-2.6850064312814657s;"></div>
<div class="bubble" style="--size:5.503592657387973rem; --distance:7.375452014583938rem; --position:72.78497998584217%; --time:2.088851135591279s; --delay:-3.124184418812894s;"></div>
<div class="bubble" style="--size:2.028220423585446rem; --distance:7.020594686399985rem; --position:43.49083124302713%; --time:2.3012971951004886s; --delay:-3.367429486079976s;"></div>
<div class="bubble" style="--size:3.807397819266087rem; --distance:9.737428987328318rem; --position:61.94042762872539%; --time:2.9311315760417296s; --delay:-3.0308064251628073s;"></div>
<div class="bubble" style="--size:5.415711305392612rem; --distance:6.021648548930554rem; --position:56.59277539485453%; --time:2.268753416727909s; --delay:-3.5104872716555873s;"></div>
<div class="bubble" style="--size:5.286603132698011rem; --distance:6.297420030694423rem; --position:14.8166867949476%; --time:2.314812495746604s; --delay:-2.2206490941502603s;"></div>
<div class="bubble" style="--size:4.084582189084247rem; --distance:6.053806489526212rem; --position:17.221042938135533%; --time:3.262647968703504s; --delay:-3.8502081602963183s;"></div>
<div class="bubble" style="--size:3.2762484661878393rem; --distance:9.78193977982611rem; --position:26.01894751803159%; --time:2.8439436154366557s; --delay:-2.681880163843175s;"></div>
<div class="bubble" style="--size:5.597148427575343rem; --distance:7.250631215865188rem; --position:94.45952345497969%; --time:3.367563745446926s; --delay:-2.9517864406891903s;"></div>
<div class="bubble" style="--size:3.3645212886613383rem; --distance:6.82698266080802rem; --position:-2.641352198721856%; --time:2.7665246609510623s; --delay:-3.9029501481358766s;"></div>
<div class="bubble" style="--size:3.1050058132039293rem; --distance:6.720731777636572rem; --position:71.20447371348473%; --time:2.467643196205392s; --delay:-2.6366823226599325s;"></div>
<div class="bubble" style="--size:5.59419080877091rem; --distance:6.09935734477768rem; --position:-4.617665283320269%; --time:2.662075916876629s; --delay:-3.6100650996417034s;"></div>
<div class="bubble" style="--size:4.414198576522754rem; --distance:8.691727.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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