小企鹅情人节快乐动画效果代码-html代码-BFW代码库

小企鹅情人节快乐动画效果代码

代码语言：html

所属分类：动画

代码描述：小企鹅情人节快乐动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.container {
  width: 400px;
  height: 400px;
  margin: auto;
  position: relative;
}

/******************************      penguin     ******************************/
.penguin {
  --penguin-skin: #685F64;
  --penguin-belly: #DADCCE;
  --penguin-eye: #25171A;
  --penguin-sparkle: #F7FFF7;
  --penguin-beak: #FF6B35;
  --penguin-blush: #FFA69E;
  position: relative;
  margin: auto;
  margin-top: 20%;
  width: 75%;
  height: 75%;
}

.penguin * {
  position: absolute;
}

/*** penguin bottom ***/
.penguin-bottom {
  background: #685F64;
  background: var(--penguin-skin, #685F64);
  top: 40%;
  left: 22.5%;
  width: 55%;
  height: 45%;
  border-radius: 70% 70% 90% 90%;
}

.hand {
  background: #685F64;
  background: var(--penguin-skin, #685F64);
  top: 0%;
  width: 30%;
  height: 60%;
}

.left-hand {
  left: 75%;
  border-radius: 20% 20% 20% 100%;
  transform: rotate(-55deg);
}

.right-hand {
  left: 25%;
  border-radius: 20% 20% 100% 20%;
  transform: rotate(130deg);
  animation-name: wawe;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 0% 0%;
}

@keyframes wawe {
  10% {
    transform: rotate(110deg);
  }
  30% {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(110deg);
.........完整代码请登录后点击上方下载按钮下载查看