ChatGPT中文版写CSS动画【AI实用技巧】

写CSS动画对于前端新手来说，是一个很大的挑战，需大量的查找资料和不断的调度才能得到自己想要的效果。

有了ChatGPT后，CSS动画变得轻松简单。只需要用人类语言描述你想要的效果，ChatGPT则可产生相应的代码，若未达最佳预期，只需不断追问。

AI7号

问：写一个css动画，3秒内渐变消失，延迟1秒执行，消失后不再出现

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.your-class {
    animation: fadeOut 3s ease-out 1s forwards;
}

它还给我解释了各个参数的含义。

上难度

问：要求动画结束后，该元素不可点击，即display为none或z-index为负

document.querySelector('.your-class').addEventListener('animationend', (e) => {
    // 将display设置为none
    e.target.style.display = 'none';

    // 或者将z-index设置为-1
    // e.target.style.zIndex = '-1';
});

还是需要用到js，我之前甚至不知道有“animationend"这个事件。完美解决✅