纯css实现泡泡上下浮动效果代码-html代码-BFW代码库

纯css实现泡泡上下浮动效果代码

代码语言：html

所属分类：动画

代码描述：纯css实现泡泡上下浮动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background-image: linear-gradient(
    to bottom right,
    #91defe,
    #99c0f9,
    #bdb6ec,
    #d7b3e3,
    #efb3d5,
    #f9bccc
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.ball {
  animation: float 3.5s ease-in-out infinite;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: relative;

  background: radial-gradient(
    circle at 75% 30%,
    white 5px,
    aqua 8%,
    darkblue 60%,
    aqua 100%
  );
  box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc,
    inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea,
    inset 0 50px 140px #fde9ea, 0 0 90px #fff;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-80px);
  }
  100% {
    transform: translatey(0px);
  }
}

.shadow {
  background: #b490b2;
  width: 150px;
  height: 40px;
  top: 70%;
  animation: expa.........完整代码请登录后点击上方下载按钮下载查看