:doodle { @grid: 500x1/ 100vmin; } :container { perspective: 100vmin; } @place-cell: center; @size: 40% 1px; will-change: transform, opacity; transform-style: preserve-3d; background: linear-gradient(to left, @multi(@p([2-4]), @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d)), transparent @r(50%) ); animation: move @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 move { 20% { opacity: 1; } 100% { transform: var(--trans) scale(0); } }
Coming Soon!
Planet befindet sich in der Erstellung ...