CSS e和pi常量与动画效果实例页面

回到相关文章 »

效果：

e与加速或衰减

pi与旋转

代码：

CSS代码：

@property --seed {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@keyframes seed {
    from { --seed: 0; }    
    to { --seed: 100; }    
}
img.active {
    animation: seed 1s linear both;
}
.e {
    translate: calc(1px * pow(var(--seed) / 16, e)) 0;
}
.pi {
    rotate: calc(4 * atan(calc(pi * var(--seed) / 100)));
}

HTML代码：

<h4>e与加速或衰减</h4>
<img id="e" class="e" src="1.jpg" />
<p><button onClick="e.classList.add('active');">点击图片运动</button></p>

<h4>pi与旋转</h4>
<img id="pi" class="pi" src="1.jpg" />
<p><button onClick="pi.classList.add('active');">点击图片运动</button></p>