css动态制作
CSS 动态制作方法
使用 CSS 变量（Custom Properties）可以动态修改样式。定义变量以 -- 开头，通过 var() 函数调用。
:root {
--primary-color: #3498db;
--padding: 10px;
}
.element {
background-color: var(--primary-color);
padding: var(--padding);
}JavaScript 可以动态更新 CSS 变量值：
document.documentElement.style.setProperty('--primary-color', '#e74c3c');CSS 动画与过渡
通过 @keyframes 和 transition 实现动态效果。@keyframes 定义动画序列，transition 平滑过渡属性变化。
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease-out;
transition: background-color 0.3s ease;
}
.element:hover {
background-color: #f1c40f;
}动态伪类选择器
利用 :hover、:active、:focus 等伪类实现交互效果。
.button {
background-color: #2ecc71;
}
.button:hover {
background-color: #27ae60;
}
.button:active {
transform: scale(0.98);
}媒体查询动态适配
通过媒体查询（@media）实现响应式设计，动态调整样式。
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}CSS 函数动态计算
使用 calc() 函数动态计算尺寸或位置。
.element {
width: calc(100% - 20px);
height: calc(50vh + 10px);
}动态加载 CSS
通过 JavaScript 动态加载 CSS 文件或样式。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dynamic-styles.css';
document.head.appendChild(link);动态样式切换
通过 JavaScript 切换类名或内联样式实现动态效果。
const element = document.querySelector('.element');
element.classList.add('active');
// 或直接修改内联样式
element.style.backgroundColor = '#9b59b6';CSS 预处理器动态生成
使用 Sass、Less 等预处理器生成动态样式。Sass 的变量和循环示例：
$colors: (#3498db, #e74c3c, #2ecc71);
@each $color in $colors {
.color-#{index($colors, $color)} {
background-color: $color;
}
}
