仰泳中的小熊动画效果-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%;
  position: relative;
  top: 75px;
  left: -15px;

}

.body{
  position: absolute;
  left: 25px;
  top: 70px;
  width: 100px;
  height: 130px;
  border: var(--darkbrown) solid 6px;
  border-radius: 45%;
  background: var(--brown);
  z-index: 2;
}

.tail{
  position: absolute;
  left: 65px;
  top: 170px;
  width: 25px;
  height: 70px;
  border: var(--darkbrown) solid 6px;
  border-radius: 50%;
  background: var(--brown);
  z-index: 1;
  animation: paddle 3s ease infinite;
}

.earLeft, .earRight{
  width: 25px;
  height: 25px;
  border: var(--darkbrown) solid 6px;
  background: var(--brown);
  border-radius: 50%;
  position: absolute;
  z-index: 0;
}

.earLeft{
  top: 15px;
}

.earRight{
  transform: translateX(123px);
  top: 15px;
}

.earlineLeft, .earlineRight{
  width: 1px;
  height: 10px;
  border: solid 1px var(--darkbrown);
  border-radius: 50%;
  background: var(--darkbrown);
  transform: rotate(-45deg);
  position:absolute;
}

.earlineLeft{
  left: 9px;
  top: 5px;
}

.earlineRight{
  transform: rotate(45deg);
  left: 12px;
  top: 5px;
}

.face{
  width: 80px;
  height: 40px;
  position: absolute;
  left: 25px;
  top: 65px;
}

.eyeLeft, .eyeRight{
  height: 25px;
  width: 13px;
  background: var(--darkbrown);
  border-radius: 50%;
  position: absolute;
  animation: blinking 6s linear infinite;
}

.eyedot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  position: absolute;
  left:4px;
  top: 13px;
  animation: blinking 6s ease-in-out infinite;
}

.eyeRight{
  right: 0;

}

.nose{
  width: 25px;
  height: 15px;
  position: absolute;
  top: 12px;
  left: 30px;
  background: var(--darkbrown);
  border-radius: 40px 40px 20px 20px;
}

.nosedot{
  background: var(--white);
  width: 10px;
  height: 2px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 6px;
}

.smile{
  width: 25px;
  height: 13px;
  position: absolute;
  top: 25px;
  left: 31px;
}

.curve1{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 2px 2px 0 0 var(--darkbrown);
  position: absolute;
  top:-10px;
  left: -10px;
}

.curve2{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: -2px 2px 0 0 var(--darkbrown);
  position: absolute;
  top:-10px;
  left: -9px;
  transform: translateX(20px);
}

.armLe.........完整代码请登录后点击上方下载按钮下载查看