小企鹅情人节快乐动画效果代码-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%;
}

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