css立方体

下载代码

html

css

分享到微信朋友圈

html

css

cube {
  --s: 243px;
  --hs: calc(var(--s) / 2);
  display: block;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  will-change: transform;
  animation: r 15s linear infinite;
}

side {
  position: absolute;
  width: 100%;
  height: 100%;

--sq: conic-gradient(
    from 270deg at calc(100% / 3) calc(100% / 3),
    #fff 90deg,
    transparent 0
  );

background: var(--sq) calc(var(--s) / 3) calc(var(--s) / 3) / 100% 100%,
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 3) calc(100% / 3),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 9) calc(100% / 9),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 27) calc(100% / 27),
    var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 81) calc(100% / 81);

background-color: #000;
  background-blend-mode: difference;
}

side:nth-child(1) {
  transform: translateZ(var(--hs));
}
side:nth-child(2) {
  transform: translateZ(calc(-1 * var(--hs)));
}
side:nth-child(3) {
  transform: rotateY(90deg) translateZ(var(--hs));
}
side:nth-child(4) {
  transform: rotateY(-90deg) translateZ(var(--hs));
}
side:nth-child(5) {
  transform: rotateX(90deg) translateZ(var(--hs));
}
side:nth-child(6) {
  transform: rotateX(-90deg) translateZ(var(--hs));
}

@keyframes r {
  100% {
    transform: rotateX(1turn) rotateY(1turn) rotateZ(1turn);
  }
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  perspective: 1000px;
}

body:after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 50%, #ff9800 1%, #673ab7);
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
}

JavaScript

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