铭文

下载代码

html

css

分享到微信朋友圈

html

@place-cell: center;
  @size: 100% 1vmin;
  border-radius: 50%;

will-change: transform, opacity;
  transform-style: preserve-3d;

background: linear-gradient(to right,
    @multi(4, @pd(#00b8a9, #f8f3d4, #f6416c, #ffde7d)),
    transparent 50%
  );

animation: cycle @r(1s, 2s, .1) linear infinite;
  animation-delay: -@r(.1s, 2s);

--trans:
    translateX(50%)
    rotateX(@r(-180deg, 180deg))
    rotateY(@r(-180deg, 180deg))
    rotateZ(@r(-180deg, 180deg));

transform-origin: 0 center;
  transform: var(--trans) scale(2);
  opacity: 0;

@keyframes cycle {
    20% { opacity: 1; }
    100% { transform: var(--trans) scale(0); }
  }

@keyframes rd {
    to { transform:
      rotateX(@p(-1turn, 1turn))
      rotateY(@p(-2turn, 2turn))
      rotateZ(@p(-1turn, 1turn))
    }
  }
</css-doodle>

css

JavaScript

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