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.........完整代码请登录后点击上方下载按钮下载查看

css水面沸腾动画效果

网友评论0

css实现炫酷图片卡片鼠标交互炫光视觉效果代码

gsap+svg实现网页视觉差异滚动动画效果代码

css布局实现苹果iphone手机的液态玻璃视觉差异ui效果代码

js+css实现炫酷鼠标交互视觉差异商品卡片展示效果代码

css实现图文卡片鼠标悬浮交互视觉差异代码

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

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

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

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

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