css动态制作
CSS动态制作的常见方法
CSS动态制作通常涉及通过JavaScript或CSS原生特性实现样式、布局或动画的动态变化。以下是几种主流方法：
使用CSS变量（Custom Properties） CSS变量允许定义可动态修改的值，通过JavaScript实时更新：
:root {
--primary-color: #3498db;
}
.element {
background-color: var(--primary-color);
}JavaScript修改：
document.documentElement.style.setProperty('--primary-color', '#e74c3c');类切换动态样式 通过JavaScript切换CSS类实现状态变化：
.active {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}element.classList.add('active');CSS动画与过渡
通过transition和@keyframes实现动态效果：
.box {
transition: all 0.3s ease;
}
.box:hover {
transform: rotate(15deg);
}
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slide 0.5s forwards;
}动态伪类选择器
利用:hover、:focus等伪类实现交互效果：
button {
background: #2ecc71;
transition: background 0.2s;
}
button:hover {
background: #27ae60;
}媒体查询动态响应 根据不同设备特性调整样式：
@media (max-width: 768px) {
.menu {
display: none;
}
}结合JavaScript的高级动态控制
动态样式表操作 直接通过JavaScript操作CSSOM：
const style = document.createElement('style');
style.textContent = `body { font-size: 16px; }`;
document.head.appendChild(style);requestAnimationFrame动画 实现高性能JavaScript动画：
function animate() {
element.style.left = `${pos++}px`;
if (pos < 100) requestAnimationFrame(animate);
}CSS Houdini API 使用Paint API等底层API实现自定义绘制：
CSS.paintWorklet.addModule('checkerboard.js');对应CSS：
.element {
background-image: paint(checkerboard);
}现代CSS动态特性
容器查询 根据容器尺寸而非视口调整样式：
@container (width > 400px) {
.card { display: flex; }
}has()选择器 根据子元素状态匹配父元素：
div:has(> .active) {
border: 2px solid blue;
}视口单位动态计算
使用dvh、svh等新单位适应移动端视口变化：
.header {
height: 100dvh;
}这些方法可根据具体需求组合使用，现代CSS已能实现大部分动态效果而无需过度依赖JavaScript。
