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=&qu.........完整代码请登录后点击上方下载按钮下载查看
css水面沸腾动画效果

网友评论0

css实现input range拖动数字变化视觉差异动画效果代码

js+css实现图片拼筹翻转切换鼠标悬停倾斜视觉差异效果代码

div+css实现3d视觉差异物体转动效果代码

js+css实现视觉差异鼠标交互倾斜文字卡片伸缩效果代码

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

css+js实现鼠标交互立体3d键盘视觉差异效果代码

three+bokeh实现彩色圆点动态视觉差异交互背景文字效果代码

css+js实现楼梯下落打开向下通道视觉差异交互效果代码

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

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