美味（纯CSS 3D）

下载代码

html

css

分享到微信朋友圈

html

css

body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 20em;
  perspective-origin: 50% calc(50% - 10em);
  background: #000;
  color: #fff;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.assembly {
  transform: translateZ(-8em) rotateX(-30deg) scaleX(1.25);
}

.rotY {
  animation: ry 2s linear infinite;
}

@keyframes ry {
  to {
    transform: rotateY(20deg);
  }
}
.rotX {
  animation: rx 2s ease-in-out infinite;
}

@keyframes rx {
  0%, 75% {
    transform: none;
  }
  100% {
    transform: rotateX(-20deg);
  }
}
.ring:nth-child(1) {
  transform: rotateY(0deg) translateZ(8em);
}
.ring:nth-child(1) .rotX {
  animation-delay: 0s;
}

.ring:nth-child(2) {
  transform: rotateY(10deg) translateZ(8em);
}
.ring:nth-child(2) .rotX {
  animation-delay: -0.05556s;
}

.ring:nth-child(3) {
  transform: rotateY(20deg) translateZ(8em);
}
.ring:nth-child(3) .rotX {
  animation-delay: -0.11111s;
}

.ring:nth-child(4) {
  transform: rotateY(30deg) translateZ(8em);
}
.ring:nth-child(4) .rotX {
  animation-delay: -0.16667s;
}

.ring:nth-child(5) {
  transform: rotateY(40deg) translateZ(8em);
}
.ring:nth-child(5) .rotX {
  animation-delay: -0.22222s;
}

.ring:nth-child(6) {
  transform: rotateY(50deg) translateZ(8em);
}
.ring:nth-child(6) .rotX {
  animation-delay: -0.27778s;
}

.ring:nth-child(7) {
  transform: rotateY(60deg) translateZ(8em);
}
.ring:nth-child(7) .rotX {
  animation-delay: -0.33333s;
}

.ring:nth-child(8) {
  transform: rotateY(70deg) translateZ(8em);
}
.ring:nth-child(8) .rotX {
  animation-delay: -0.38889s;
}

.ring:nth-child(9) {
  transform: rotateY(80deg) translateZ(8em);
}
.ring:nth-child(9) .rotX {
  animation-delay: -0.44444s;
}

.ring:nth-child(10) {
  transform: rotateY(90deg) translateZ(8em);
}
.ring:nth-child(10) .rotX {
  animation-delay: -0.5s;
}

.ring:nth-child(11) {
  transform: rotateY(100deg) translateZ(8em);
}
.ring:nth-child(11) .rotX {
  animation-delay: -0.55556s;
}

.ring:nth-child(12) {
  transform: rotateY(110deg) translateZ(8em);
}
.ring:nth-child(12) .rotX {
  animation-delay: -0.61111s;
}

.ring:nth-child(13) {
  transform: rotateY(120deg) translateZ(8em);
}
.ring:nth-child(13) .rotX {
  animation-delay: -0.66667s;
}

.ring:nth-child(14) {
  transform: rotateY(130deg) translateZ(8em);
}
.ring:nth-child(14) .rotX {
  animation-delay: -0.72222s;
}

.ring:nth-child(15) {
  transform: rotateY(140deg) translateZ(8em);
}
.ring:nth-child(15) .rotX {
  animation-delay: -0.77778s;
}

.ring:nth-child(16) {
  transform: rotateY(150deg) translateZ(8em);
}
.ring:nth-child(16) .rotX {
  animation-delay: -0.83333s;
}

.ring:nth-child(17) {
  transform: rotateY(160deg) translateZ(8em);
}
.ring:nth-child(17) .rotX {
  animation-delay: -0.88889s;
}

.ring:nth-child(18) {
  transform: rotateY(170deg) translateZ(8em);
}
.ring:nth-child(18) .rotX {
  animation-delay: -0.94444s;
}

.ring:nth-child(19) {
  transform: rotateY(180deg) translateZ(8em);
}
.ring:nth-child(19) .rotX {
  animation-delay: -1s;
}

.ring:nth-child(20) {
  transform: rotateY(190deg) translateZ(8em);
}
.ring:nth-child(20) .rotX {
  animation-delay: -1.05556s;
}

.ring:nth-child(21) {
  transform: rotateY(200deg) translateZ(8em);
}
.ring:nth-child(21) .rotX {
  animation-delay: -1.11111s;
}

.ring:nth-child(22) {
  transform: rotateY(210deg) translateZ(8em);
}
.ring:nth-child(22) .rotX {
  animation-delay: -1.16667s;
}

.ring:nth-child(23) {
  transform: rotateY(220deg) translateZ(8em);
}
.ring:nth-child(23) .rotX {
  animation-delay: -1.22222s;
}

.ring:nth-child(24) {
  transform: rotateY(230deg) translateZ(8em);
}
.ring:nth-child(24) .rotX {
  animation-delay: -1.27778s;
}

.ring:nth-child(25) {
  transform: rotateY(240deg) translateZ(8em);
}
.ring:nth-child(25) .rotX {
  animation-delay: -1.33333s;
}

.ring:nth-child(26) {
  transform: rotateY(250deg) translateZ(8em);
}
.ring:nth-child(26) .rotX {
  animation-delay: -1.38889s;
}

.ring:nth-child(27) {
  transform: rotateY(260deg) translateZ(8em);
}
.ring:nth-child(27) .rotX {
  animation-delay: -1.44444s;
}

.ring:nth-child(28) {
  transform: rotateY(270deg) translateZ(8em);
}
.ring:nth-child(28) .rotX {
  animation-delay: -1.5s;
}

.ring:nth-child(29) {
  transform: rotateY(280deg) translateZ(8em);
}
.ring:nth-child(29) .rotX {
  animation-delay: -1.55556s;
}

.ring:nth-child(30) {
  transform: rotateY(290deg) translateZ(8em);
}
.ring:nth-child(30) .rotX {
  animation-delay: -1.61111s;
}

.ring:nth-child(31) {
  transform: rotateY(300deg) translateZ(8em);
}
.ring:nth-child(31) .rotX {
  animation-delay: -1.66667s;
}

.ring:nth-child(32) {
  transform: rotateY(310deg) translateZ(8em);
}
.ring:nth-child(32) .rotX {
  animation-delay: -1.72222s;
}

.ring:nth-child(33) {
  transform: rotateY(320deg) translateZ(8em);
}
.ring:nth-child(33) .rotX {
  animation-delay: -1.77778s;
}

.ring:nth-child(34) {
  transform: rotateY(330deg) translateZ(8em);
}
.ring:nth-child(34) .rotX {
  animation-delay: -1.83333s;
}

.ring:nth-child(35) {
  transform: rotateY(340deg) translateZ(8em);
}
.ring:nth-child(35) .rotX {
  animation-delay: -1.88889s;
}

.ring:nth-child(36) {
  transform: rotateY(350deg) translateZ(8em);
}
.ring:nth-child(36) .rotX {
  animation-delay: -1.94444s;
}

.dot {
  margin: -0.375em;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  backface-visibility: hidden;
  background: currentColor;
}
.ring:nth-child(2n + 0) .dot:nth-child(1) {
  transform: rotateX(0deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(2) {
  transform: rotateX(20deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(3) {
  transform: rotateX(40deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(4) {
  transform: rotateX(60deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(5) {
  transform: rotateX(80deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(6) {
  transform: rotateX(100deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(7) {
  transform: rotateX(120deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(8) {
  transform: rotateX(140deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(9) {
  transform: rotateX(160deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(10) {
  transform: rotateX(180deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(11) {
  transform: rotateX(200deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(12) {
  transform: rotateX(220deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(13) {
  transform: rotateX(240deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(14) {
  transform: rotateX(260deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(15) {
  transform: rotateX(280deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(16) {
  transform: rotateX(300deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(17) {
  transform: rotateX(320deg) translateZ(5em);
}
.ring:nth-child(2n + 0) .dot:nth-child(18) {
  transform: rotateX(340deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(1) {
  transform: rotateX(10deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(2) {
  transform: rotateX(30deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(3) {
  transform: rotateX(50deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(4) {
  transform: rotateX(70deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(5) {
  transform: rotateX(90deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(6) {
  transform: rotateX(110deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(7) {
  transform: rotateX(130deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(8) {
  transform: rotateX(150deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(9) {
  transform: rotateX(170deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(10) {
  transform: rotateX(190deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(11) {
  transform: rotateX(210deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(12) {
  transform: rotateX(230deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(13) {
  transform: rotateX(250deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(14) {
  transform: rotateX(270deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(15) {
  transform: rotateX(290deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(16) {
  transform: rotateX(310deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(17) {
  transform: rotateX(330deg) translateZ(5em);
}
.ring:nth-child(2n + 1) .dot:nth-child(18) {
  transform: rotateX(350deg) translateZ(5em);
}

.ring:nth-child(n + 37),
.dot:nth-child(n + 19) {
  display: none;
}

JavaScript

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