css-doodle.js螺旋状动画特效 - 站长素材 -CSS代码 -演示与下载 -时代Java :doodle { @grid: 45x1 / 40vmin; position: relative; z-index: 1; } :container { transform: translate(50%, 33vmin) } :after, :before { content: ''; @place-cell: center; @size: 100%; background: radial-gradient( @p(#FFFDE1, #FB3569) @r(70%), transparent 0 ) @pn(30% 50%, 70% 50%, 50% 60%) / @r(.1vmin, 5vmin) @lr() no-repeat; } @place-cell: centerr; @size: 100%; will-change: transform; animation: r 4s linear infinite; animation-delay: calc(-4s / @size() * @i()); --translate: translateY(calc(-66vmin / @size() * @i())); @keyframes r { from { transform: var(--translate) rotate(0) } to { transform: var(--translate) rotateZ(-1turn) } } :doodle { @grid: 1x3 / 100vmax; position: absolute; top: 0; left: 0; z-index: 0; } @size: 100% 150%; position: absolute; background: @m(100, ( linear-gradient(transparent, @p( #FFFDE1@repeat(2, @p([0-9a-f])), #FB3569@repeat(2, @p([0-9a-f])) )) @r(0%, 100%) @r(0%, 100%) / @r(1px) @r(23vmin) no-repeat )); will-change: transform; animation: f 20s linear calc(-20s / @size() * @i()) infinite; @keyframes f { from { transform: translateY(-100%) } to { transform: translateY(100%) } }
下载代码说明
X关闭

css-doodle.js实现螺旋状动画特效源码

css-doodle.js螺旋状动画特效是一款css3基于css-doodle.js制作旋转的圆点线条螺旋体动画特效。欢迎下载！本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，是一款非常具有参考借鉴价值的代码，欢迎大家下载使用，希望对大家有所帮助！