css制作特效
CSS 制作特效的方法
使用过渡（Transition）实现平滑动画效果
通过 transition 属性可以实现元素状态变化的平滑过渡。例如，鼠标悬停时改变背景色：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}关键帧动画（Keyframes）
通过 @keyframes 定义动画序列，结合 animation 属性应用动画：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite alternate;
}变换（Transform）效果
使用 transform 实现旋转、缩放、倾斜等效果：
.card {
transform: rotate(15deg) scale(1.1);
}阴影与渐变
通过 box-shadow 和 gradient 增强视觉效果：
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: linear-gradient(to right, #ff9966, #ff5e62);
}滤镜（Filter）特效
使用 filter 实现模糊、亮度调整等：
.image {
filter: blur(2px) brightness(150%);
}混合模式（Blend Mode）
通过 mix-blend-mode 控制元素重叠时的混合效果：
.overlay {
mix-blend-mode: multiply;
}滚动视差（Parallax）
结合 background-attachment: fixed 实现滚动视差：
.parallax {
background-image: url("image.jpg");
background-attachment: fixed;
height: 500px;
}剪裁路径（Clip-Path）
使用 clip-path 创建自定义形状：
.shape {
clip-path: polygon(0 0, 100% 0, 50% 100%);
}响应式特效
通过媒体查询适配不同设备：
@media (max-width: 768px) {
.effect {
transform: scale(0.9);
}
}3D 变换
利用 transform-style: preserve-3d 实现立体效果：
.container {
transform-style: preserve-3d;
}
.element {
transform: rotateY(45deg);
}
