css水面沸腾动画效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;display=swap'>

<style>
  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:#ED5565;
  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: var(--footer-background);
}
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 translate="no">
<div class="main"></div>
<div class="footer">
<div class="bubbles">
<div class="bubble" style="--size:5.284214360704379rem; --distance:8.960328957658465rem; --position:66.0382007812959%; --time:3.1442308657507683s; --delay:-2.579310098436835s;"></div>
<div class="bubble" style="--size:2.284092594705786rem; --distance:7.62592477535253rem; --position:99.10727820927761%; --time:2.1396712000205733s; --delay:-3.8159359026659185s;"></div>
<div class="bubble" style="--size:3.2551739008156426rem; --distance:7.340181321308563rem; --position:104.23352238671156%; --time:2.0782670073151155s; --delay:-2.179805979042823s;"></div>
<div class="bubble" style="--size:5.764707029264864rem; --distance:8.165412986994191rem; --position:93.28034585272695%; --time:2.376364490402295s; --delay:-3.3328945979562623s;"></div>
<div class="bubble" style="--size:3.8470492354297114rem; --distance:6.3550173087292805rem; --position:49.77869293578238%; --time:3.9852763187748512s; --delay:-2.002954843213459s;"></div>
<div class="bubble" style="--size:4.858750960272722rem; --distance:8.790022857615341rem; --position:20.203047767367853%; --time:2.883324646854196s; --delay:-2.179121106307983s;"></div>
<div class="bubble" style="--size:2.525099979200606rem; --distance:7.279438375998874rem; --position:60.344644853427425%; --time:3.361957411295691s; --delay:-2.729674402421294s;"></div>
<div class="bubble" style="--size:5.974740958261549rem; --distance:8.897699286006816rem; --position:20.623153002063972%; --time:3.1045427259552643s; --delay:-3.99313215981573s;"></div>
<div class="bubble" style="--size:3.627013694459503rem; --distance:7.156976392012285rem; --position:28.266484945145258%; --time:2.7233277687806225s; --delay:-3.644342957968089s;"></div>
<div class="bubble" style="--size:2.3361182721808245rem; --distance:6.718631666742629rem; --position:7.374903071477345%; --time:3.246041342675435s; --delay:-3.548343593086037s;"></div>
<div class="bubble" style="--size:5.369764654912971rem; --distance:9.02384701618651rem; --position:35.56243861563211%; --time:3.2469692185820276s; --delay:-2.8087988129617307s;"></div>
<div class="bubble" style="--size:4.3284336083953106rem; --distance:8.652720666782065rem; --position:85.96410476842402%; --time:2.286418418091518s; --delay:-2.829937970456127s;"></div>
<div class="bubble" style="--size:5.4717762847085725rem; --distance:9.841498138029284rem; --position:73.16793770968617%; --time:3.8683644459487803s; --delay:-2.350878010855357s;"></div>
<div class="bubble" style="--size:5.218399679129643rem; --distance:6.410547451163174rem; --position:54.61191207888638%; --time:3.6535233537137963s; --delay:-3.1167757993098704s;"></div>
<div class="bubble" style="--size:4.905329220894996rem; --distance:7.829661949233801rem; --position:93.88187285567253%; --time:2.105006841110101s; --delay:-3.6239532161077896s;"></div>
<div class="bubble" style="--size:2.6897705738200495rem; --distance:6.39756763588503rem; --position:66.44023757183217%; --time:2.8380823318439865s; --delay:-2.850181853734564s;"></div>
<div class="bubble" style="--size:4.484460536861314rem; --distance:7.671635523630448rem; --position:52.17332324232702%; --time:3.0492526747585385s; --delay:-3.9510624272044654s;"></div>
<div class="bubble" style="--size:4.3005613553173445rem; --distance:9.329048268233429rem; --position:104.06594914976267%; --time:2.3652126730055505s; --delay:-2.1963994178572355s;"></div>
<div class="bubble" style="--size:5.917344121621969rem; --distance:9.89997868181851rem; --position:102.83260086364537%; --time:3.1450258671752795s; --delay:-2.190744760741764s;"></div>
<div class="bubble" style="--size:5.901813662621804rem; --distance:7.871710471749164rem; --position:99.82332612085618%; --time:2.990869519693402s; --delay:-3.8762978529491288s;"></div>
<div class="bubble" style="--size:2.7993031789496277rem; --distance:7.179275027278898rem; --position:34.353965534417185%; --time:2.33696671640814s; --delay:-2.133845745253261s;"></div>
<div class="bubble" style="--size:5.993950380013831rem; --distance:9.735780229314315rem; --position:85.54542066707248%; --time:2.1454943301032308s; --delay:-3.480775475519843s;"></div>
<div class="bubble" style="--size:3.322866598733083rem; --distance:6.587580466286072rem; --position:42.275349706633975%; --time:2.1258348741785977s; --delay:-2.4677647449624156s;"></div>
<div class="bubble" style="--size:3.0726590690215136rem; --distance:9.991067906682444rem; --position:18.082387238493077%; --time:3.3979061790153438s; --delay:-2.1599596855499987s;"></div>
<div class="bubble" style="--size:3.536538605439792rem; --distance:6.868472499806511rem; --position:38.39669891412442%; --time:3.6003052257536052s; --delay:-3.857662037737421s;"></div>
<div class="bubble" style="--size:3.1355943467571032rem; --distance:7.461918840090926rem; --position:71.65933110859197%; --time:2.5611445791762435s; --delay:-3.3154465946033875s;"></div>
<div class="bubble" style="--size:2.9242772275089868rem; --distance:7.242860212490461rem; --position:101.97770246195208%; --time:2.2120724775500347s; --delay:-2.53397217133618s;"></div>
<div class="bubble" style="--size:3.863281341576286rem; --distance:7.475090940315003rem; --position:2.7696373880341474%; --time:3.2718908707357985s; --delay:-2.786892578710152s;"></div>
<div class="bubble" style="--size:3.3398120061084153rem; --distance:8.992833640951574rem; --position:19.606096512752504%; --time:2.3529821159017628s; --delay:-3.863728516849051s;"></div>
<div class="bubble" style="--size:5.295044926448843rem; --distance:8.003684685647189rem; --position:94.51191320433504%; --time:2.73882513179602s; --delay:-3.753665107378823s;"></div>
<div class="bubble" style="--size:2.108119114886085rem; --distance:9.556397313738366rem; --position:44.22757138573124%; --time:3.202611829415823s; --delay:-2.5962164692454315s;"></div>
<div class="bubble" style="--size:3.002260471998609rem; --distance:8.279387907314412rem; --position:29.033313975678247%; --time:3.1503822281251503s; --delay:-2.7751328589632025s;"></div>
<div class="bubble" style="--size:4.63419169544191rem; --distance:9.524831243596147rem; --position:77.23441579561869%; --time:2.249531559910629s; --delay:-3.5405799308556727s;"></div>
<div class="bubble" style="--size:5.952022707042815rem; --distance:9.634157802262525rem; --position:64.5419505965209%; --time:2.4390550812453915s; --delay:-2.2379375706812827s;"></div>
<div class="bubble" style="--size:5.74658916171961rem; --distance:7.939495911077157rem; --position:1.4757682327487176%; --time:2.6924280526520907s; --delay:-3.90536216290144s;"></div>
<div class="bubble" style="--size:5.937000088953171rem; --distance:7.647599035180833rem; --position:-3.8486819909621173%; --time:2.858187985916488s; --delay:-3.5688732547974564s;"></div>
<div class="bubble" style="--size:2.3604282186637704rem; --distance:9.090556365631628rem; --position:103.8978595264524%; --time:2.001430326915795s; --delay:-3.5544357803724806s;"></div>
<div class="bubble" style="--size:5.453531901585202rem; --distance:7.3364877411741904rem; --position:10.790413912025604%; --time:2.0904596378360387s; --delay:-3.5348846565121903s;"></div>
<div class="bubble" style="--size:4.803057198920461rem; --distance:6.6558972685601425rem; --position:77.71361465009797%; --time:3.949132825501516s; --delay:-2.1732230492480133s;"></div>
<div class="bubble" style="--size:5.166490890018548rem; --distance:7.574414339737319rem; --position:29.530549320642017%; --time:2.970111500585835s; --delay:-2.5365485734542177s;"></div>
<div class="bubble" style="--size:4.069577585037313rem; --distance:9.886109955294012rem; --position:94.08416573448044%; --time:3.987686440385507s; --delay:-2.4297926100375236s;"></div>
<div class="bubble" style="--size:2.8181803725213035rem; --distance:9.882164962063918rem; --position:12.795857813077316%; --time:3.000694925949172s; --delay:-2.5222404198512627s;"></div>
<div class="bubble" style="--size:4.504888357336722rem; --distance:9.958473751178923rem; --position:102.92050252217582%; --time:2.0618527041109846s; --delay:-2.8307999915718614s;"></div>
<div class="bubble" style="--size:3.915136917973765rem; --distance:8.400077114294394rem; --position:95.46585305589689%; --time:2.4064368880315086s; --delay:-3.9496539054141033s;"></div>
<div class="bubble" style="--size:3.235601675677743rem; --distance:7.141541700168591rem; --position:28.67259569475255%; --time:3.846801539369847s; --delay:-3.1441460735808224s;"></div>
<div class="bubble" style="--size:5.475772767561198rem; --distance:9.444710953784554rem; --position:99.98063471961447%; --time:2.115685946739472s; --delay:-3.3867467400058335s;"></div>
<div class="bubble" style="--size:3.3225833514975127rem; --distance:7.227054862686567rem; --position:36.15015029219563%; --time:3.8116866100305233s; --delay:-3.7752451508396287s;"></div>
<div class="bubble" style="--size:2.2797442235105487rem; --distance:9.993039171715463rem; --position:103.05649249732964%; --time:3.6418547825049017s; --delay:-2.292491148771912s;"></div>
<div class="bubble" style="--size:5.0748488532675164rem; --distance:6.113822656125953rem; --position:1.3024896612334258%; --time:3.9414264975041s; --delay:-3.469805250895578s;"></div>
<div class="bubble" style="--size:5.855569461262146rem; --distance:9.655349816396031rem; --position:54.30523176190418%; --time:2.5297312733156474s; --delay:-2.10702622599303s;"></div>
<div class="bubble" style="--size:2.87602589512173rem; --distance:7.318744576943246rem; --position:20.766302788896976%; --time:2.552017241068814s; --delay:-2.0315623317656275s;"></div>
<div class="bubble" style="--size:5.214573837043903rem; --distance:6.836172079779945rem; --position:99.33487216546908%; --time:2.5375977530337384s; --delay:-2.7734632722006873s;"></div>
<div class="bubble" style="--size:5.501035332032632rem; --distance:7.51795249369633rem; --position:54.80377458717386%; --time:2.4714284097621295s; --delay:-3.2767002667700074s;"></div>
<div class="bubble" style="--size:5.8051965506773895rem; --distance:8.672572411851476rem; --position:73.80905157097595%; --time:3.8147930253731888s; --delay:-3.469752230136144s;"></div>
<div class="bubble" style="--size:3.45596144953851rem; --distance:7.018874475850405rem; --position:29.428561080240797%; --time:2.9470456701791234s; --delay:-2.4204709491415644s;"></div>
<div class="bubble" style="--size:4.262486328890547rem; --distance:6.841164055407167rem; --position:63.45887730733767%; --time:3.4659052914854906s; --delay:-3.306311826334431s;"></div>
<div class="bubble" style="--size:4.4918961127295365rem; --distance:8.749909777693986rem; --position:64.73797001812645%; --time:3.589263639570863s; --delay:-2.342422268276535s;"></div>
<div class="bubble" style="--size:2.883143383864203rem; --distance:8.284925725928654rem; --position:27.98158451855094%; --time:2.8830748048360726s; --delay:-3.0409058609521735s;"></div>
<div class="bubble" style="--size:4.244945273094041rem; --distance:8.617415081799496rem; --position:25.38282673729614%; --time:2.580025750725999s; --delay:-2.6367447577430743s;"></div>
<div class="bubble" style="--size:3.283222289664658rem; --distance:7.968579529248387rem; --position:98.96135165581562%; --time:3.9849275521170204s; --delay:-3.048471811624219s;"></div>
<div class="bubble" style="--size:5.231411283192892rem; --distance:6.432742010911465rem; --position:35.13375628406125%; --time:3.133853297898567s; --delay:-3.4770232385973423s;"></div>
<div .........完整代码请登录后点击上方下载按钮下载查看
css水面沸腾动画效果

网友评论0

three实现三张图片卡片鼠标交互视觉差异动画效果代码

div+css实现3d视觉差异卡片交互效果代码

gsap+ScrollTrigger实现视觉差异飞机窗口滚动进入页面代码

js+css实现图片鼠标悬浮移动视觉差异动画效果代码

gsap+svg实现带视觉差异的模糊卡片鼠标交互效果代码

div+css实现视觉差异鼠标交互彩虹云效果代码

css实现三维多层视觉差异电影海报效果代码

three实现视觉差异滚动方块效果代码

js+css实现卡片鼠标交互视觉差异效果代码

vanilla-tilt实现视觉差异卡片交互悬浮效果代码
