为了使已存在的技能栏具有动画效果,可以通过以下步骤实现:
// 获取技能栏的所有项目
const skillItems = document.querySelectorAll('.skill-item');
// 遍历每个项目并添加动画效果
skillItems.forEach((item, index) => {
// 设置初始透明度为0
item.style.opacity = 0;
// 使用setTimeout函数延迟添加动画效果,以实现逐个显示的效果
setTimeout(() => {
// 添加淡入效果
item.style.opacity = 1;
item.style.transition = 'opacity 0.5s ease-in-out';
}, index * 200); // 每个项目延迟200毫秒显示
});
领取专属 10元无门槛券
手把手带您无忧上云