css3结合js制作
CSS3 结合 JavaScript 制作动态效果
CSS3 和 JavaScript 结合可以实现丰富的动态效果，包括动画、交互和响应式设计。以下是几种常见的实现方式：
CSS3 动画与 JavaScript 控制
CSS3 提供了 @keyframes 和 animation 属性，可以定义动画效果。JavaScript 可以动态修改这些属性或触发动画。
.box {
width: 100px;
height: 100px;
background: red;
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}const box = document.querySelector('.box');
box.addEventListener('click', () => {
box.style.animationPlayState = 'paused';
});动态修改 CSS 变量
CSS3 支持自定义变量（CSS Variables），JavaScript 可以动态修改这些变量。
:root {
--main-color: blue;
}
.element {
background-color: var(--main-color);
}document.documentElement.style.setProperty('--main-color', 'red');类切换实现交互效果
通过 JavaScript 切换元素的类名，触发 CSS3 定义的过渡或动画效果。
.button {
transition: background-color 0.3s;
}
.button.active {
background-color: green;
}const button = document.querySelector('.button');
button.addEventListener('click', () => {
button.classList.toggle('active');
});响应式设计与 JavaScript
结合 CSS3 的媒体查询和 JavaScript 的事件监听，可以实现更灵活的响应式效果。
@media (max-width: 600px) {
.menu {
display: none;
}
}window.addEventListener('resize', () => {
if (window.innerWidth > 600) {
document.querySelector('.menu').style.display = 'block';
}
});常见应用场景
下拉菜单
通过 CSS3 过渡效果和 JavaScript 事件实现平滑的下拉菜单。
.dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
}
.dropdown-content.open {
max-height: 200px;
}document.querySelector('.dropdown').addEventListener('click', () => {
document.querySelector('.dropdown-content').classList.toggle('open');
});模态框
结合 CSS3 动画和 JavaScript 控制模态框的显示与隐藏。
.modal {
opacity: 0;
transition: opacity 0.3s;
}
.modal.show {
opacity: 1;
}document.querySelector('.open-modal').addEventListener('click', () => {
document.querySelector('.modal').classList.add('show');
});
document.querySelector('.close-modal').addEventListener('click', () => {
document.querySelector('.modal').classList.remove('show');
});图片轮播
利用 CSS3 的 transform 和 JavaScript 实现图片轮播效果。
.slider {
display: flex;
transition: transform 0.5s;
}
.slide {
min-width: 100%;
}let currentSlide = 0;
const slider = document.querySelector('.slider');
function nextSlide() {
currentSlide = (currentSlide + 1) % 3;
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
}
setInterval(nextSlide, 3000);性能优化建议
- 优先使用 CSS3 动画，因为浏览器对 CSS 动画的优化更好。
- 避免频繁操作 DOM，可以使用
requestAnimationFrame优化动画性能。 - 使用
will-change属性提示浏览器哪些元素会发生变化。
.element {
will-change: transform, opacity;
}- 对于复杂的动画，考虑使用 WebGL 或 Canvas 替代 CSS3 和 JavaScript。
通过合理结合 CSS3 和 JavaScript，可以创造出既美观又高效的动态效果。
