js 动态添加css3 @keyframes

fanyanjiang

已于 2023-08-30 18:04:15 修改

阅读量2.6k

点赞数 1

文章标签： css3 javascript css

于 2022-01-05 11:35:57 首次发布

本文链接：https://blog.youkuaiyun.com/fanyanjiang/article/details/122319923

版权

本文详细介绍了如何使用JavaScript创建一个名为'mypoint'的关键帧动画，并通过createElement和innerHTML操作将其插入到HTML元素中。通过一步步的代码展示，读者可以掌握在实际项目中应用CSS动画的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js创建@keyframes

const keyframes = '@keyframes mypoint {to {transform: scale(1.5);background: rgba(0, 0, 0, 0);}}'
// 创建style标签
const style = document.createElement('style');
// 设置style属性
style.type = 'text/css';
// 将 keyframes样式写入style内
style.innerHTML = keyframes;
// 将style样式存放到box标签
document.getElementByTagName('box')[0].appendChild(style);