HTML+CSS大熊猫（前端）

最新推荐文章于 2024-06-12 11:13:48 发布

星染夜空

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量446

点赞数 11

文章标签：前端 html css javascript html5 vscode

本文链接：https://blog.csdn.net/hexuhui0920/article/details/135334030

版权

一、创意效果介绍

一个大熊猫跳来跳去

二、效果图片

三、设计代码

（1）HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>星染夜空的大熊猫</title>
  </head>

  <body>
    <div class="weight">
      <div class="panda">
        <div class="panda__contain">
          <div class="panda__ears"></div>
          <div class="panda__head">
            <div class="panda__eyes"></div>
            <div class="panda__nose"></div>
          </div>
        </div>
        <div class="panda__arms"></div>
        <div class="panda__body"></div>
        <div class="panda__legs"></div>
      </div>
    </div>
    <div class="panda__shadow"></div>
  </body>
</html>

（2）CSS


html,
body {
  height: 100%;
}

body {
  background: #a6c1a6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  flex-direction: column;
  overflow: hidden;
}

.panda {
  transform: scale(1.2) translateY(40px);
  zoom: 1.2;
  animation: panda 0.25s ease-in-out alternate infinite;
  transform-origin: bottom center;
}
.panda__ears {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: -1;
  transform: translateY(23px) scale(1.25);
}
.panda__ears:before,
.panda__ears:after {
  content: " ";
  display: block;
  background: #543535;
  width: 10px;
  height: 10px;
  border: 5px solid #1b1e23;
  border-radius: 10px;
}
.panda__contain {
  transform-origin: bottom center;
  animation: tilt 3s ease-in-out alternate infinite;
}
.panda__head,
.panda__body {
  background: #eaf4de;
  height: 50px;
  width: 60px;
  border-radius: 30px 30px 15px 15px/40px 40px 10px 10px;
  position: relative;
  display: flex;
  justify-content: center;
}
.panda__eyes {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 65%;
  left: 17%;
  top: 40%;
  animation: eyes 3s ease-in-out infinite alternate;
}
.panda__eyes:before,
.panda__eyes:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border: 6px solid #1b1e23;
  background: #9fb7dd;
}
.panda__eyes:before {
  transform: rotate(-30deg) scale(1, 0.75);
  border-radius: 12px 8px 8px 8px/12px 8px 8px 8px;
}
.panda__eyes:after {
  transform: rotate(30deg) scale(1, 0.75);
  border-radius: 8px 12px 8px 8px/8px 12px 8px 8px;
}
.panda__nose {
  width: 30px;
  height: 35px;
  background: #eaf4de;
  border: 1px solid #1b1e23;
  border-radius: 16px;
  transform: scale(1, 0.5);
  position: absolute;
  top: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: nose 3s ease-in-out alternate infinite;
}
.panda__nose:before {
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  margin-top: 5px;
  background: #1b1e23;
  animation: eyes 3s ease-in-out infinite alternate;
}
.panda__nose:after {
  content: "";
  display: block;
  height: 15px;
  width: 2px;
  border-radius: 4px;
  background: #1b1e23;
  animation: eyes 3s ease-in-out infinite alternate;
}
.panda__arms {
  position: relative;
}
.panda__arms:before,
.panda__arms:after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  height: 30px;
  width: 13px;
  background: #1b1e23;
  border-radius: 5px 5px 5px 5px;
  transform-origin: center top;
  z-index: -1;
}
.panda__arms:before {
  transform: rotateZ(120deg);
  left: 10px;
  animation: wave 0.5s ease-in-out alternate infinite;
}
.panda__arms:after {
  right: 10px;
  transform: rotateZ(-35deg);
  animation: offhand 0.8s ease-in-out alternate infinite;
}
.panda__body {
  z-index: -1;
  transform: scale(1, 0.65) translateY(-30px);
  border-top: 20px solid #1b1e23;
  border-bottom: 5px solid #1b1e23;
  animation: breathe 0.25s ease-in-out infinite alternate;
  border-radius: 30px 30px 25px 25px/40px 40px 25px 25px;
}
.panda__legs {
  position: relative;
  transform: translateY(-35px);
  display: flex;
  justify-content: space-between;
  z-index: -2;
  width: 50px;
  margin-left: 5px;
}
.panda__legs:before,
.panda__legs:after {
  content: " ";
  display: block;
  height: 25px;
  width: 18px;
  border-radius: 0 0 5px 5px;
  background: #1b1e23;
}
.panda__legs:before {
  transform: translateY(-10px);
  animation: run 0.5s ease-in-out alternate infinite;
}
.panda__legs:after {
  transform: translateY(-16px);
  animation: run-r 0.5s ease-in-out alternate infinite;
}
.panda__shadow {
  content: "";
  display: block;
  background: #1b1e23;
  width: 60px;
  height: 60px;
  transform: scale(1, 0.3);
  border-radius: 30px;
  position: relative;
  z-index: -1;
  opacity: 0.2;
  animation: shadow 0.25s ease-in-out alternate infinite;
}

.weight {
  transform-origin: bottom center;
  animation: weight 0.5s ease-in-out alternate infinite;
}

@keyframes wave {
  0% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(120deg);
  }
}
@keyframes tilt {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(10deg);
  }
}
@keyframes breathe {
  0% {
    transform: scale(1, 0.65) translateY(-30px);
  }
  100% {
    transform: scale(1, 0.67) translateY(-30px);
  }
}
@keyframes offhand {
  0% {
    transform: rotateZ(-110deg);
  }
  100% {
    transform: rotateZ(-80deg);
  }
}
@keyframes eyes {
  0% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(1px);
  }
}
@keyframes nose {
  0% {
    transform: scale(1, 0.5) translateX(-2px);
  }
  100% {
    transform: scale(1, 0.5) translateX(2px);
  }
}
@keyframes run {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: scale(0.85, 1) translateY(-16px);
    background: #000;
  }
}
@keyframes run-r {
  0% {
    transform: scale(0.85, 1) translateY(-16px);
    background: #000;
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes panda {
  0% {
    transform: scale(1) translateY(60px);
  }
  100% {
    transform: scale(1) translateY(56px);
  }
}
@keyframes weight {
  0% {
    transform: rotateZ(-4deg);
  }
  100% {
    transform: rotateZ(4deg);
  }
}
@keyframes shadow {
  0% {
    transform: scale(1.2, 0.3) translateY(-30px);
  }
  100% {
    transform: scale(1.15, 0.3) translateY(-27px);
  }
}