CSS响应式卡比兽

下载代码

html

css

分享到微信朋友圈

html

css

*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --size: 60;
  --unit: calc((var(--size) / 300) * 1vmin);
  --belly: #f1debb;
  --dark-belly: #b59c78;
  --body: #355a50;
  --dark-body: #162c37;
  --foot: #965b3c;
  --claws: #fafafa;
}
body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  background: #177082;
  -webkit-box-pack: center;
          justify-content: center;
}
.snorlax {
  height: calc(237 * var(--unit));
  width: calc(300 * var(--unit));
  position: relative;
}
.snorlax *,
.snorlax *:after,
.snorlax *:before {
  position: absolute;
}
.snorlax:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border-radius: 50%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  opacity: 0.5;
  background: #111;
  -webkit-transform: translate(-50%, 25%);
          transform: translate(-50%, 25%);
  left: 50%;
}
.snorlax__body {
  border-radius: 50% 45% 50% 50%/68% 50% 28% 30%;
  height: 74%;
  width: 79%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--body);
  overflow: hidden;
  top: 60%;
  left: 47%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.snorlax__body-shade {
  background: var(--dark-body);
  height: 30%;
  width: 80%;
  bottom: 0;
  border-radius: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.snorlax__body-shade:after {
  content: '';
  position: absolute;
  width: 25%;
  height: 150%;
  border-radius: 50%;
  background: var(--dark-body);
  left: 9%;
  bottom: 24%;
  -webkit-transform: rotate(-22deg);
          transform: rotate(-22deg);
}
.snorlax__brow {
  background: var(--belly);
}
.snorlax__brow--left {
  width: 50%;
  height: 100%;
  left: 5%;
  top: 11%;
  border-radius: 65% 47% 0 50%/70% 39% 0 44%;
}
.snorlax__brow--right {
  width: 54%;
  height: 100%;
  right: 4%;
  top: 10%;
  overflow: hidden;
  border-radius: 45% 80% 0 50%/72% 77% 0 44%;
}
.snorlax__brow--right:before {
  content: '';
  right: 0;
  height: 100%;
  width: 32%;
  bottom: 0;
  background: var(--dark-belly);
  z-index: 2;
}
.snorlax__brow--right:after {
  content: '';
  right: 16%;
  height: 100%;
  width: 32%;
  bottom: 36%;
  background: var(--belly);
  z-index: 3;
  border-radius: 0 0 75% 0/0 0 36% 0;
}
.snorlax__eye {
  height: calc(2 * var(--unit));
  width: 15%;
  background: #000;
  top: 33%;
  z-index: 5;
}
.snorlax__eye--left {
  left: 21%;
}
.snorlax__eye--right {
  right: 25%;
}
.snorlax__mouth {
  height: calc(2 * var(--unit));
  width: 30%;
  background: #000;
  top: 52%;
  left: 48%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.snorlax__tooth {
  background: #000;
  height: 235%;
  width: 20%;
  bottom: 100%;
  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.snorlax__tooth:after {
  content: '';
  background: var(--claws);
  height: 100%;
  width: 100%;
  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: scale(0.65);
          transform: scale(0.65);
}
.snorlax__tooth--left {
  left: 0;
}
.snorlax__tooth--right {
  right: 0;
}
.snorlax__head {
  height: 30%;
  width: 45%;
  left: 50%;
  top: 5%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.snorlax__head-outline {
  background: var(--body);
  height: 100%;
  width: 100%;
  border: calc(2 * var(--unit)) solid #000;
  border-radius: 75% 75% 25% 25%/110% 110% 0% 0%;
  overflow: hidden;
}
.snorlax__head-outline:after {
  content: '';
  right: -5%;
  height: 110%;
  width: 15%;
  border-radius: 50%/50%;
  top: -5%;
  background: var(--dark-body);
}
.snorlax__ear {
  height: 64%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--body);
  top: -14%;
  width: 35%;
  position: absolute;
  overflow: hidden;
  border-radius: 15% 85% 0 10%/20% 100% 0 80%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);
}
.snorlax__ear:before {
  content: '';
  top: 0;
  left: 0;
  background: var(--body);
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 15%;
  border-radius: 28%;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotate(-67deg) translate(11%, 23%);
          transform: rotate(-67deg) translate(11%, 23%);
}
.snorlax__ear--left {
  left: 4%;
}
.snorlax__ear--right {
  right: 4%;
  top: -15%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.snorlax__ear--right:after {
  content: '';
  left: -10%;
  width: 25%;
  background: var(--dark-body);
  height: 100%;
  top: -10%;
  border-radius: 50%/50%;
}
.snorlax__belly {
  position: absolute;
  height: 50%;
  width: 82%;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-49%, 0%);
          transform: translate(-49%, 0%);
}
.snorlax__belly:after {
  content: '';
  position: absolute;
  width: 58%;
  height: 50%;
  border-top: calc(10 * var(--unit)) solid var(--belly);
  top: 90%;
  left: 50%;
  -webkit-clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%);
          clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%);
  -webkit-transform: translate(-50%, -26%);
          transform: translate(-50%, -26%);
  z-index: 3;
  border-radius: 50% 50% 0 0/50% 50% 50% 50%;
}
.snorlax__belly-segment--one {
  height: 83%;
  width: 100%;
  bottom: 0%;
  left: 0%;
  background: var(--belly);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translate(6.5%, 13%) rotate(-20deg);
          transform: translate(6.5%, 13%) rotate(-20deg);
  border-radius: 40% 55% 0 17%/60% 100% 0% 40%;
  -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
  clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
  z-index: 2;
}
.snorlax__belly-segment--one:before {
  content: '';
  position: absolute;
  top: 100%;
  background: var(--belly);
  left: 50%;
  height: 80%;
  width: 80%;
  border-radius: 10%;
  -webkit-transform: translate(-50%, -81%) rotate(10deg);
          transform: translate(-50%, -81%) rotate(10deg);
}
.snorlax__belly-segment--two {
  height: 90%;
  width: 100%;
  bottom: 0%;
  right: 0%;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  background: var(--dark-belly);
  -webkit-transform: translate(-7%, 14%) rotate(20deg);
          transform: translate(-7%, 14%) rotate(20deg);
  border-radius: 0% 34% 34% 0/0% 60% 40% 0%;
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);
  clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);
}
.snorlax__belly-segment--two:after {
  content: '';
  position: absolute;
  right: 10%;
  top: -4%;
  width: 100%;
  height: 102%;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
  background: var(--belly);
  z-index: 3;
  border-radius: 0 14% 19% 0/0 50% 50% 0;
}
.snorlax__belly-segment--two:before {
  content: '';
  background: var(--belly);
  position: absolute;
  z-index: 2;
  height: 50%;
  width: 50%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 31%) rotate(-20deg);
          transform: translate(-50%, 31%) rotate(-20deg);
}
.snorlax__arm-left {
  height: 85%;
  width: 24%;
  left: 12%;
  top: 14%;
  -webkit-transform: rotate(-21deg);
          transform: rotate(-21deg);
}
.snorlax__claws--left {
  background: #000;
  top: -4%;
  width: 60%;
  height: 10%;
  left: 48%;
  -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.snorlax__claws--left:after {
  content: '';
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  background: #fff;
  -webkit-transform: scaleY(0.8) scaleX(0.95);
          transform: scaleY(0.8) scaleX(0.95);
}
.snorlax__arm-left-arm {
  background: var(--body);
  height: 68%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 44% 54% 50% 50%/50% 60% 40% 50%;
  -webkit-transform-origin: 50% 60%;
          transform-origin: 50% 60%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  overflow: hidden;
  border: calc(2 * var(--unit)) solid #000;
}
.snorlax__arm-left-arm:after {
  content: '';
  right: 0;
  width: 50%;
  background: var(--dark-body);
  height: 120%;
  top: 50%;
  -webkit-transform: translate(56%, -50%) rotate(-15deg);
          transform: translate(56%, -50%) rotate(-15deg);
  border-radius: 50%;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
  -webkit-animation: fade 6s infinite linear;
          animation: fade 6s infinite linear;
}
@-webkit-keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.snorlax__arm-wrapper {
  -webkit-animation: wave 6s infinite ease;
          animation: wave 6s infinite ease;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: 56% 41%;
          transform-origin: 56% 41%;
}
@-webkit-keyframes wave {
  0, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
}
@keyframes wave {
  0, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
}
.snorlax__arm-right {
  height: 50%;
  width: 17%;
  right: 7%;
  top: 28%;
  -webkit-transform: rotate(-39deg);
          transform: rotate(-39deg);
}
.snorlax__claw {
  bottom: 0;
  width: 15%;
  height: 9%;
  background: #000;
  -webkit-transform: translate(109%, 19%) rotate(45deg);
          transform: translate(109%, 19%) rotate(45deg);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.snorlax__claw:after {
  content: '';
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 100%;
  width: 100%;
  background: #fff;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.snorlax__arm-right-arm {
  height: 100%;
  width: 100%;
  border-radius: 25% 75% 65% 35%/56% 60% 40% 30%;
  background: var(--dark-body);
  overflow: hidden;
  border: calc(2 * var(--unit)) solid #000;
}
.snorlax__arm-right-arm:after {
  content: '';
  height: 100%;
  width: 130%;
  border-radius: 50%;
  background: var(--body);
  bottom: 8%;
  left: -9%;
}
.snorlax__claws--right {
  bottom: -6%;
  left: 25%;
  height: 22%;
  width: 57%;
  background: #000;
  -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
}
.snorlax__claws--right:after {
  height: 100%;
  width: 100%;
  content: '';
  background: #fff;
  -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scaleY(0.85) scaleX(0.85);
          transform: scaleY(0.85) scaleX(0.85);
}
.snorlax__left-foot {
  height: 34%;
  width: 29%;
  bottom: 0;
  left: 2.5%;
}
.snorlax__left-foot-foot {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--belly);
  border-radius: 60% 40% 55% 40%/60% 45% 55% 40%;
  border: calc(2 * (var(--unit))) solid #000;
  overflow: hidden;
}
.snorlax__left-foot-foot:after,
.snorlax__left-foot-foot:before {
  content: '';
}
.snorlax__left-foot-foot:after {
  border: calc(2 * var(--unit)) solid #000;
  height: 38%;
  width: 49%;
  border-radius: 50%;
  background: var(--foot);
  left: 38%;
  bottom: 11%;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
}
.snorlax__left-foot-foot:before {
  background: var(--dark-belly);
  height: 73%;
  width: 100%;
  left: 32%;
  bottom: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  border-radius: 61% 20% 20% 37%/73% 50% 50% 50%;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.snorlax__foot-claw {
  top: 50%;
  left: 50%;
  width: 20%;
  height: 30%;
}
.snorlax__foot-claw:after {
  content: '';
  background: var(--claws);
  bottom: 12%;
  height: 35%;
  width: 67%;
  left: 15%;
  border-radius: 50%;
}
.snorlax__foot-claw:before {
  content: '';
  bottom: 2%;
  left: 0;
  width: 100%;
  height: 56%;
  border-radius: 50%;
  background: var(--claws);
  border: calc(3 * var(--unit)) solid #000;
}
.snorlax__foot-claw > div {
  width: 100%;
  height: 66%;
  top: 0;
  left: 0;
  background: #000;
  -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
  clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
}
.snorlax__foot-claw > div:after {
  content: '';
  height: 100%;
  width: 100%;
  background: var(--claws);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
  clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
}
.snorlax__foot-claw--one {
  --clip-point: 65;
  left: -5%;
  top: 52%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  width: 15%;
  height: 23%;
}
.snorlax__foot-claw--two {
  --clip-point: 50;
  top: 9%;
  left: 3%;
  height: 26%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.snorlax__foot-claw--three {
  --clip-point: 20;
  top: -10%;
  left: 34%;
  width: 21%;
  height: 25%;
}
.snorlax__foot-claw--four {
  --clip-point: 20;
  top: -18%;
  left: 49%;
  width: 21%;
  height: 34%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.snorlax__foot-claw--five {
  --clip-point: 50;
  top: 0%;
  left: 78%;
  width: 21%;
  height: 31%;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
.snorlax__foot-claw--six {
  --clip-point: 50;
  top: 37%;
  left: 95%;
  width: 19%;
  height: 27%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.snorlax__right-foot {
  bottom: 0;
  right: 6.5%;
  width: 28%;
  height: 35%;
}
.snorlax__right-foot-foot {
  height: 100%;
  width: 100%;
  border: calc(2 * var(--unit)) solid #000;
  background: var(--belly);
  overflow: hidden;
  border-radius: 50% 50% 50% 50%/50% 45% 55% 50%;
}
.snorlax__right-foot-foot:before,
.snorlax__right-foot-foot:after {
  content: '';
  bottom: 0;
}
.snorlax__right-foot-foot:before {
  left: 5%;
  border-radius: 50%;
  height: 62%;
  width: 77%;
  background: var(--dark-belly);
}
.snorlax__right-foot-foot:after {
  left: 10%;
  border-radius: 50%;
  border: calc(2 * var(--unit)) solid #000;
  bottom: 14%;
  height: 42%;
  background: var(--foot);
  width: 55%;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg