螺旋动画

下载代码

html

css

分享到微信朋友圈

html

--translate: translateY(calc(-66vmin / @size() * @i()));
  @keyframes r {
    from { transform: var(--translate) rotate(0) }
    to { transform: var(--translate) rotateZ(-1turn) }
  }
</css-doodle>

<css-doodle> 
	: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%) }
	}
</css-doodle>

css

JavaScript

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