使用CSS round()函数模拟steps动画效果实例页面

回到相关文章 »

效果：

原始素材，静态

动画

代码：

CSS代码：

.spin {
  transform: rotate(round(calc(var(--seed) * 3.6deg), 45deg));
  animation: seed 1s linear infinite;    
}
@property --seed {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@keyframes seed {
  from { --seed: 0; }    
  to { --seed: 100; }    
}

HTML代码：

<img src="loading.png" class="spin" />