css制作动态
使用CSS动画（@keyframes）
通过@keyframes定义动画关键帧，结合animation属性实现动态效果。例如，创建一个元素旋转动画：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.element {
animation: spin 2s linear infinite;
}过渡效果（transition）
通过transition属性实现平滑的状态变化。适用于悬停、焦点等交互场景：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}变换（transform）
结合transform实现位移、缩放、旋转等动态效果：
.card {
transform: scale(1);
transition: transform 0.5s;
}
.card:hover {
transform: scale(1.05);
}使用CSS变量动态更新
通过JavaScript修改CSS变量实现实时动态变化：
:root {
--primary-color: #3498db;
}
.element {
background-color: var(--primary-color);
}document.documentElement.style.setProperty('--primary-color', '#e74c3c');视差滚动效果
利用background-attachment: fixed创建视差滚动：
.parallax {
background-image: url("image.jpg");
background-attachment: fixed;
background-position: center;
height: 100vh;
}响应式动画
通过媒体查询适配不同设备的动态效果：
@media (max-width: 768px) {
.menu {
transform: translateX(-100%);
transition: transform 0.3s;
}
.menu.active {
transform: translateX(0);
}
}使用CSS滤镜（filter）
动态调整元素的视觉效果：
.image {
filter: grayscale(80%);
transition: filter 0.4s;
}
.image:hover {
filter: grayscale(0%);
}动态阴影效果
通过box-shadow创建悬浮效果：
.box {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: box-shadow 0.3s;
}
.box:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
