通过 js 给元素添加动画样式animation属性 ,以及 perspective 属性探究
在JavaScript中，您可以使用元素的style属性来添加animation和perspective属性。以下是一个简单的例子，演示如何给一个元素添加动画和透视：
HTML:
<div id="animatedElement">这是一个将要添加动画的元素</div>JavaScript:
// 获取元素
var element = document.getElementById('animatedElement');
// 添加动画
element.style.animation = 'fadeInOut 2s infinite alternate';
// 添加透视
element.style.perspective = '500px';
// 为元素定义关键帧
document.styleSheets[0].insertRule(`
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
`, 0);在这个例子中，我们首先通过getElementById获取了一个元素。然后，我们通过设置style属性的animation和perspective属性来给元素添加动画和透视。同时，我们使用insertRule方法在文档的样式表中定义了一个简单的淡入淡出动画的关键帧。
评论已关闭