网页css特效制作
CSS 动画基础
使用 @keyframes 定义动画关键帧，通过 animation 属性绑定到元素：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}悬停交互效果
通过 :hover 伪类触发过渡效果，结合 transition 平滑变化：
.button {
background: #3498db;
transition: background 0.3s, transform 0.2s;
}
.button:hover {
background: #2980b9;
transform: scale(1.05);
}3D 变换效果
利用 transform-style 和 perspective 实现立体效果：
.card {
transform-style: preserve-3d;
perspective: 1000px;
}
.card:hover .inner {
transform: rotateY(180deg);
}背景粒子动画
通过伪元素和 box-shadow 生成动态粒子：
.particle {
position: relative;
}
.particle::before {
content: '';
position: absolute;
width: 2px;
height: 2px;
box-shadow: 0 0 5px 1px white;
animation: float 3s infinite linear;
}文字渐变与描边
使用 background-clip 实现文字渐变填充：
.text-gradient {
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
color: transparent;
text-stroke: 1px #333;
-webkit-text-stroke: 1px #333;
}滚动视差效果
通过 background-attachment: fixed 创建视差层：
.parallax {
background-image: url('bg.jpg');
background-attachment: fixed;
background-position: center;
height: 100vh;
}光影滤镜组合
结合 filter 属性实现高级视觉效果：
.glow-effect {
filter: drop-shadow(0 0 8px rgba(255, 0, 255, 0.7))
brightness(1.2);
}响应式媒体查询
针对不同屏幕尺寸调整特效参数：
@media (max-width: 768px) {
.animation {
animation-duration: 1s;
}
}
