小企鹅情人节快乐动画效果代码-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);
  }
  70% {
    transform: rotate(130deg);
  }
  }

.feet {
  background: #FF6B35;
  background: var(--penguin-beak, #FF6B35);
  top: 83%;
  width: 15%;
  height: 30%;
  border-radius: 50%;
  z-index: -1;
}

.left-feet {
  left: 60%;
  transform: rotate(-80deg);
}

.right-feet {
  left: 25%;
  transform: rotate(80deg);
}

.bow-tie {
  --bow-tie-middle: #17BEBB;
  --bow-tie-edge: #2CC3C1;
  top: 10%;
  left: 30%;
  width: 40%;
  height: 20%;
  z-index: 1;
}

.bow-tie .middle {
  background: #17BEBB;
  background: var(--bow-tie-middle, #17BEBB);
  top: 30%;
  left: 37.5%;
  width: 25%;
  height: 50%;
  border-radius: 50%;
}

.bow-tie .left-edge {
  background: #2CC3C1;
  background: var(--bow-tie-edge, #2CC3C1);
  top: 20%;
  left: 50%;
  width: 50%;
  height: 80%;
  border-radius: 90% 10% 10% 90% / 50% 50% 50% 50%;
}

.bow-tie .right-edge {
  background: #2CC3C1;
  background: var(--bow-tie-edge, #2CC3C1);
  top: 20%;
  left: 0%;
  width: 50%;
  height: 80%;
  border-radius: 10% 90% 90% 10% / 50% 50% 50% 50%;
}

/*** penguin top ***/
.penguin-top {
  background: #685F64;
  background: var(--penguin-skin, #685F64);
  top: 10%;
  left: 25%;
  width: 50%;
  height: 47%;
  border-radius: 70% 70% 60% 60%;
}

.cheek {
  background: #DADCCE;
  background: var(--penguin-belly, #DADCCE);
  top: 15%;
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.left-cheek {
  left: 5%;
}

.right-cheek {
  left: 35%;
}

.eye {
  background: #25171A;
  background: var(--penguin-eye, #25171A);
  top: 45%;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.left-eye {
  left: 25%;
}

.right-eye {
  left: 60%;
}

.sparkle {
  background: #F7FFF7;
  background: var(--penguin-sparkle, #F7FFF7);
  top: 25%;
  left: 15%;
  width: 35%;
  height: 35%;
  border-radius: 50%;
}

.blush {
  background: #FFA69E;
  background: var(--penguin-blush, #FFA69E);
  top: 65%;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.left-blush {
  left: 15%;
}

.right-blush {
  left: 70%;
}

.beak {
  background: #FF6B35;
  background: var(--penguin-beak, #FF6B35);
  border-radius: 50%;
}

.beak-top {
  left: 40%;
  top: 60%;
  width: 20%;
  height: 10%;
}

.beak-bottom {
  left: 42%;
  top: 65%;
  width: 16%;
  height: 10%;
}

.belly {
  background: #DADCCE;
  background: var(--penguin-belly, #DADCCE);
  left: 2.5%;
  top: 60%;
  width: 95%;
  height: 100%;
  border-radius: 120% 120% 100% 100%;
}

.crest {
  top: -15%;
  left: 40%;
  width: 20%;
  height: 20%;
}

.crest .long {
  background: #685F64;
  background: var(--penguin-skin, #685F64);
  top: 0%;
  left: 50%;
  width: 30%;
  height: 100%;
  border-radius: 40%;
  transform: rotate(5deg);
}

.crest .short {
  background: #685F64;
  background: var(--penguin-skin, #685F64);
  top: 20%;
  left: 46%;
  width: 25%;
  height: 100%;
.........完整代码请登录后点击上方下载按钮下载查看