:doodle { @grid: 30x1 / 18vmin; --deg: @p(-0.5turn, 0.5turn); } --color: @p(#51eaea, #fffde1, #ff9d76, #fb3569); :container { perspective: 30vmin; } ::after, ::before { content: ""; background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart; } @place-cell: center; @size: 100%; box-shadow: @m2(0 0 50px var(--color)); background: @m100(radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 95% { transform: translateZ(35vmin) rotateZ(@var(--deg)); } }
投稿
Upload
警告
测试阶段该功能仅限管理员使用。
ここにドラッグしてアップロード
MP4、WMV、WEBMなどの主な形式をサポートしています