css实现一个三维超级玛丽带表情动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现一个三维超级玛丽带表情动画效果代码，无js代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html {
  font-size: 1vw;
}

@media (min-width: 1000px) {
  html {
    font-size: 1.5vmin;
  }
}
body {
  margin: auto;
  overflow: hidden;
  background-image: radial-gradient(#1f1956 70%, #110e2e 90%);
  background-position: 0 0;
  background-size: 25vw 33vh;
  box-shadow: inset 0 0 5rem #000, inset 0 0 2rem #000;
}
body div {
  justify-content: center;
  perspective: 50rem;
  filter: drop-shadow(0 0 1rem #00487b);
}
body *:not(.i),
body *:not(.i):before,
body *:not(.i):after {
  transform-style: preserve-3d;
  box-sizing: border-box;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  outline: none;
  transition: transform 0.15s ease-in-out;
}
body i {
  width: calc(100% / 15) !important;
}

body,
html,
div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
}

body > div > i1,
body > div > i2,
body > div > i3,
body > div > i4,
body > div > i5,
body > div > i,
body > div > b {
  width: calc(100% / 5);
  height: calc(100% / 5);
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
body > div > i1:before,
body > div > i2:before,
body > div > i3:before,
body > div > i4:before,
body > div > i5:before,
body > div > i:before,
body > div > b:before {
  content: "";
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  box-shadow: 0 0 0 0rem rgba(189, 189, 189, 0.1), inset 0 0 0 0rem rgba(189, 189, 189, 0.1);
  transition: box-shadow 2s cubic-bezier(0, 0, 0.72, 0.52);
}
body > div > i1:hover:before,
body > div > i2:hover:before,
body > div > i3:hover:before,
body > div > i4:hover:before,
body > div > i5:hover:before,
body > div > i:hover:before,
body > div > b:hover:before {
  box-shadow: 0 0 0 5rem rgba(255, 255, 255, 0), inset 0 0 0 5rem rgba(255, 255, 255, 0);
}

body i3:nth-of-type(3) {
  display: none;
}

@media (orientation: portrait) {
  html {
    font-size: 1.9vmin;
  }

  div {
    max-height: calc(100vw * 1.5);
  }

  body {
    background-size: 33vw 20vh;
  }
}
mario {
  left: -50% !important;
  bottom: 0;
  right: -50%;
  margin: auto;
  width: 100rem;
  height: 64rem;
}

z,
x,
y {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  transition: transform 0.25s ease-in-out !important;
}

sig {
  font-size: 0.3rem;
  color: #00487b;
  width: 10em;
  top: auto !important;
  left: auto !important;
  bottom: 0.2rem !important;
  right: 0.2rem !important;
  transform: skewX(10deg) scaleY(0.45) rotate(2deg);
}
sig,
sig * {
  height: 9.25em;
  overflow: hidden;
  border-radius: 0.5em;
}
sig:before,
sig *:before {
  width: 5em;
  height: 5em;
  background: currentColor;
  transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
  box-shadow: -3em 3em 0 0 currentColor;
  border-radius: 0.5em 2em 0.5em 2em;
}
sig * {
  width: 5em;
  transform: translate3d(3.75em, 0, 0) scaleY(0.95);
  display: block !important;
}
sig *:before {
  transform: translate3d(-3em, -2em, 0) rotate(-45deg);
  box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
  border-radius: 0.5em;
}

mario > u:nth-of-type(1), mario > u:nth-of-type(2) {
  transform: translate3d(41rem, 27.25rem, 10rem) rotateY(-5deg) rotateX(2deg);
  width: 9rem;
  height: 10rem;
  overflow: hidden;
  background: #bdbdbd;
}
mario > u:nth-of-type(1) u, mario > u:nth-of-type(2) u {
  background: #bdbdbd;
  width: 9rem;
  height: 10rem;
  border-radius: 50%;
}
mario > u:nth-of-type(1) u u, mario > u:nth-of-type(2) u u {
  width: 5rem;
  height: 5.5rem;
  background: linear-gradient(#00487b, #18bdd6);
  border-radius: 50%;
  transform: translate3d(2.9rem, 2.9rem, 0) rotate(-10deg);
  box-shadow: inset 0 0 0.5rem #000c15, inset 0 0 0.5rem #0e6c7a;
}
mario > u:nth-of-type(1) u u:before, mario > u:nth-of-type(2) u u:before {
  width: 3rem;
  height: 3.5rem;
  border: 1rem solid #000;
  border-top-width: 1.2rem;
  border-bottom-width: 1.2rem;
  background: #bdbdbd;
  transform: translate3d(0.7rem, 0.8rem, 0);
  border-radius: 50%;
}
mario > u:nth-of-type(1) u u:after, mario > u:nth-of-type(2) u u:after {
  width: 8rem;
  height: 11rem;
  background: radial-gradient(rgba(255, 255, 255, 0.5) -23%, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
  transform: translate3d(-2rem, -4rem, 0);
  border-radius: 2rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.6);
}
mario > u:nth-of-type(2) {
  transform: translate3d(49rem, 27.25rem, 10rem) rotateY(5deg) rotateX(2deg);
}
mario > u:nth-of-type(2) u u {
  transform: translate3d(2rem, 2.9rem, 0) rotate(10deg);
}
mario > u:nth-of-type(2) u u:before {
  transform: translate3d(1.2rem, 0.8rem, 0);
}
mario > u:nth-of-type(2) u u:after {
  transform: translate3d(-1rem, -4rem, 0);
}
mario > u:nth-of-type(3) {
  background: #c19c65;
  width: 2rem;
  height: 10rem;
  transform: translate3d(49rem, 27rem, 10.8rem) rotateX(1deg);
}
mario > u:nth-of-type(3):before {
  background: linear-gradient(#c19c65, #c2ae86, #c2ae86);
  width: 4rem;
  height: 10rem;
  transform: translate3d(-3.9rem, 1rem, 0) rotatey(-30deg);
  transform-origin: 100% 100%;
  border-radius: 1rem;
}
mario > u:nth-of-type(3):after {
  background: linear-gradient(#8a5b3e, #c19c65, #8a5b3e);
  width: 4rem;
  height: 10rem;
  transform: translate3d(1.4rem, 1rem, -2rem) rotatey(30deg);
  transform-origin: 100% 100%;
  border-radius: 1rem;
}
mario > u:nth-of-type(4) {
  background: #c19c65;
  width: 8rem;
  height: 5rem;
  transform: translate3d(43rem, 23.5rem, 9.95rem) rotate(7deg) rotateY(-6deg) rotateX(10deg);
}
mario > u:nth-of-type(4):before {
  background: #8a5b3e;
  width: 8rem;
  height: 2rem;
  transform: translate3d(0, 5rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(5) {
  background: #c19c65;
  width: 8rem;
  height: 5rem;
  transform: translate3d(49rem, 23.3rem, 9.95rem) rotate(-9deg) rotateY(6deg) rotateX(10deg);
}
mario > u:nth-of-type(5):before {
  background: #8a5b3e;
  width: 8rem;
  height: 2rem;
  transform: translate3d(0, 5rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(6) {
  background: #c19c65;
  width: 5rem;
  height: 2rem;
  transform: translate3d(40rem, 27.5rem, 10.05rem) rotate(-40deg) rotateX(10deg);
  border-radius: 1rem 0 0 0;
}
mario > u:nth-of-type(6):before {
  background: #8a5b3e;
  width: 5rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
  border-radius: 2rem 1rem 0 0/1rem 1rem 0 0;
}
mario > u:nth-of-type(6):after {
  border-radius: 0 2rem 0 0;
  background: #c19c65;
  width: 5rem;
  height: 3rem;
  transform: translate3d(1rem, -2rem, 0.3rem) rotateY(-14deg) skewX(-39deg);
}
mario > u:nth-of-type(7) {
  background: #c19c65;
  width: 5rem;
  height: 2rem;
  transform: translate3d(55rem, 27.5rem, 10.05rem) rotate(40deg) rotateX(10deg);
  border-radius: 0 1rem 0 0;
}
mario > u:nth-of-type(7):before {
  background: linear-gradient(90deg, #8a5b3e, #c19c65, #c19c65);
  width: 5rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(7):after {
  background: #c19c65;
  width: 5rem;
  height: 3rem;
  transform: translate3d(-1rem, -2rem, 0.1rem) rotateY(14deg) skewX(39deg);
}
mario > u:nth-of-type(8) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(39.75rem, 29.5rem, 10rem) rotate(-69deg) rotateX(10deg);
}
mario > u:nth-of-type(8):before {
  background: #8a5b3e;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(9) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(57.2rem, 29.5rem, 10rem) rotate(69deg) rotateX(10deg);
}
mario > u:nth-of-type(9):before {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(10) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(39.5rem, 31.5rem, 10rem) rotate(-90deg) rotateX(10deg);
}
mario > u:nth-of-type(10):before {
  background: linear-gradient(-90deg, #8a5b3e, #d39684);
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(11) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(57.2rem, 31.5rem, 10rem) rotate(90deg) rotateX(10deg);
}
mario > u:nth-of-type(11):before {
  background: #c2ae86;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(12) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(40rem, 34rem, 10rem) rotate(-117deg) rotateX(10deg);
}
mario > u:nth-of-type(12):before {
  background: #d39684;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(13) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(56.5rem, 34rem, 10rem) rotate(117deg) rotateX(10deg);
}
mario > u:nth-of-type(13):before {
  background: #c2ae86;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(14) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(41.5rem, 35.5rem, 10rem) rotate(-150deg) rotateX(10deg);
}
mario > u:nth-of-type(14):before {
  background: #d39684;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(15) {
  background: #c19c65;
  width: 3rem;
  height: 2rem;
  transform: translate3d(55rem, 35.5rem, 10rem) rotate(150deg) rotateX(10deg);
}
mario > u:nth-of-type(15):before {
  background: #d39684;
  width: 3rem;
  height: 2rem;
  transform: translate3d(0, 2rem, 0) rotateX(-60deg);
  transform-origin: 100% 0;
}
mario > u:nth-of-type(16) {
  background: #c19c65;
  width: 18rem;
  height: 6rem;
  transform: translate3d(41rem, 35.6rem, 11rem) rotateX(2deg);
  border-radius: 3rem;
}
mario > u:nth-of-type(16):before {
  width: 16rem;
  height: 1rem;
  transform: translate3d(2rem, -0.9rem, 0rem) rotateX(88deg);
  background: #c19c65;
  transform-origin: 0 100%;
}
mario > u:nth-of-type(17), mario > u:nth-of-type(18) {
  transform: translate3d(40rem, 20rem, 0);
}
mario > u:nth-of-type(17) > u:nth-of-type(1), mario > u:nth-of-type(18) > u:nth-of-type(1) {
  background: linear-gradient(to right, #c19c65, #8a5b3e);
  width: 5rem;
  height: 12rem;
  transform: translate3d(19rem, 7rem, 10.3rem) rotateY(28deg);
  transform-origin: 0 0;
}
mario > u:nth-of-type(17) > u:nth-of-type(1):before, mario > u:nth-of-type(18) > u:nth-of-type(1):before {
  background: #8a5b3e;
  width: 5.5rem;
  height: 10rem;
  transform: translate3d(4.8rem, 2rem, 0rem) rotateY(38deg);
  transform-origin: 0 0;
}
mario > u:nth-of-type(17) > u:nth-of-type(2), mario > u:nth-of-type(18) > u:nth-of-type(2) {
  width: 5rem;
  height: 3rem;
  transform: translate3d(25.5rem, 19rem, 7.3rem) rotateY(85deg) rotateX(-5deg);
  transform-origin: 0 0;
  background: #8a5b3e;
}
mario > u:nth-of-type(17) > u:nth-of-type(2):before, mario >.........完整代码请登录后点击上方下载按钮下载查看