css3结合js制作
CSS3 结合 JavaScript 制作动态效果
CSS3 和 JavaScript 可以结合使用，创建丰富的交互式动态效果。CSS3 负责样式和动画，JavaScript 负责逻辑控制和用户交互。
基本结合方式
通过 JavaScript 动态修改 CSS 类或样式属性，触发 CSS3 动画或过渡效果。例如，点击按钮时添加一个类，该类定义了 CSS3 动画。
document.getElementById('button').addEventListener('click', function() {
document.getElementById('element').classList.add('animate');
});.animate {
animation: slideIn 1s ease-out;
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}使用 CSS3 变量
CSS3 自定义变量（CSS Variables）可以通过 JavaScript 动态修改，实现更灵活的样式控制。
document.documentElement.style.setProperty('--primary-color', '#ff0000');:root {
--primary-color: #0000ff;
}
.element {
color: var(--primary-color);
}监听 CSS 动画事件
JavaScript 可以监听 CSS3 动画的开始、结束和迭代事件，实现更复杂的交互逻辑。
const element = document.getElementById('animatedElement');
element.addEventListener('animationstart', () => {
console.log('Animation started');
});
element.addEventListener('animationend', () => {
console.log('Animation ended');
});结合 GSAP 或 Anime.js
使用动画库如 GSAP 或 Anime.js 可以更高效地结合 CSS3 和 JavaScript，实现复杂的动画序列。
gsap.to(".box", {
duration: 2,
x: 100,
rotation: 360,
ease: "bounce"
});响应式交互效果
通过 JavaScript 检测用户行为（如滚动、鼠标移动），动态调整 CSS3 属性，实现视差滚动或跟随鼠标的效果。
window.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
document.documentElement.style.setProperty('--mouse-x', x);
document.documentElement.style.setProperty('--mouse-y', y);
});.element {
transform: translate(
calc(var(--mouse-x) * 10px),
calc(var(--mouse-y) * 10px)
);
}性能优化
避免频繁触发重绘和回流，使用 requestAnimationFrame 优化动画性能。
function animate() {
// 更新样式
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);通过以上方法，可以充分发挥 CSS3 和 JavaScript 的优势，创建高性能、交互丰富的动态效果。
