css 制作特效
使用 CSS 制作特效的方法
动画效果（@keyframes）
通过 @keyframes 定义动画序列，结合 animation 属性实现动态效果。
示例代码：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}过渡效果（transition）
通过 transition 属性平滑改变元素状态，常用于交互反馈。
示例代码：
.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: red;
}3D 变换（transform）
利用 transform 实现旋转、缩放或倾斜等效果。
示例代码：
.card {
transform: rotateY(30deg);
transition: transform 0.5s;
}
.card:hover {
transform: rotateY(0);
}阴影与滤镜（box-shadow/filter）
通过 box-shadow 和 filter 增强视觉层次。
示例代码：
.image {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}渐变背景（gradient）
使用 linear-gradient 或 radial-gradient 创建色彩过渡。
示例代码：
.header {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}文本特效（text-shadow）
通过 text-shadow 为文字添加立体感或发光效果。
示例代码：
.title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}遮罩与裁剪（mask/clip-path）
使用 clip-path 或 mask 创建不规则形状。
示例代码：
.shape {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}视差滚动（background-attachment）
通过 background-attachment: fixed 实现背景与内容滚动速度差异。
示例代码：
.parallax {
background-image: url("image.jpg");
background-attachment: fixed;
height: 500px;
}混合模式（mix-blend-mode）
使用 mix-blend-mode 控制元素与背景的混合方式。
示例代码：
.overlay {
mix-blend-mode: multiply;
}响应式特效（媒体查询）
结合媒体查询适配不同设备。
示例代码：
@media (max-width: 768px) {
.effect { transform: scale(0.9); }
}
