仰泳中的小熊动画效果-html代码-BFW代码库

仰泳中的小熊动画效果

代码语言：html

代码描述：仰泳中的小熊动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root{
  --black:#000;
  --darkbrown: #392913;
  --brown:#AA9A88;
  --lightbrown: #E1D2C4;
  --mediumbrown: #7A6F63;
  --white: #FFFFFF;
  --aqua: #9ADED6;
  --gray: #8AD0CE;
}


*{
  padding: 0;
  margin: 0;
  box-sizing: 0;
}

body{
  height: 100vh;
  background: var(--aqua);
  display: grid;
  place-items: center;
}

.ripple{
  position: absolute;
  width:150px;
  height: 150px;
  border: solid 5px rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 0 0 20px rgba(255, 255, 255, .3);
  border-radius: 50%;
  left: 2px;
  top: 30px;
  animation: ripple 4s linear infinite;
}


.container{
  width: 160px;
  height:250px;
  position: relative;
  animation: circular 20s linear infinite;
}

.head{
  position: absolute;
  left: 9px;
  width: 130px;
  height: 120px;
  border: var(--darkbrown) solid 6px;
  border-radius: 45%;
  background: var(--brown);
  z-index: 3;
  overflow: hidden;
}

.lightcircle{
  width: 160px;
  height: 120px;
  background: var(--lightbrown);
  border-radius: 100%;
.........完整代码请登录后点击上方下载按钮下载查看