js常用交互效果

document.querySelector('.hover-effect').addEventListener('mouseover', function() {
    this.style.backgroundColor = 'lightblue';
});

document.querySelector('.hover-effect').addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
});

document.querySelector('.click-effect').addEventListener('click', function() {
    this.style.transform = 'scale(1.2)';
    setTimeout(() => {
        this.style.transform = '';
    }, 300);
});

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

document.querySelector('.animate').classList.add('fade-in');

document.querySelector('form').addEventListener('submit', function(event) {
    const input = document.querySelector('#required-input');
    if (input.value.trim() === '') {
        event.preventDefault();
        input.style.borderColor = 'red';
    } else {
        input.style.borderColor = '';
    }
});

window.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
        document.querySelector('.back-to-top').style.display = 'block';
    } else {
        document.querySelector('.back-to-top').style.display = 'none';
    }
});