神奇的CSS使用css制作
CSS 实现常见特效
悬停动画效果
通过:hover伪类结合transition实现平滑过渡效果。元素在鼠标悬停时产生颜色、大小或位置的渐变变化，增强交互体验。
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
background-color: #4CAF50;
}渐变背景
使用linear-gradient或radial-gradient创建色彩过渡效果。通过角度和颜色节点的设置，能实现从简单双色到复杂多色的背景渐变。
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}阴影与光晕
box-shadow属性可同时添加多层阴影，通过模糊半径和扩展控制立体感。配合filter: drop-shadow()能为非矩形元素添加自然投影。
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1),
0 6px 20px rgba(0,0,0,0.1);
}自定义形状
clip-path允许使用多边形、圆形或SVG路径裁剪元素。结合shape-outside可实现文字环绕特殊形状的排版效果。
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}滚动视差
background-attachment: fixed创建固定背景与滚动内容的视差效果。配合不同层级的运动速度控制，能构建深度感知。
.parallax {
background-attachment: fixed;
background-position: center;
}响应式布局
媒体查询(@media)根据设备特性调整样式。结合CSS Grid和Flexbox的弹性布局，确保设计在不同屏幕尺寸下的适应性。
@media (max-width: 768px) {
.menu { flex-direction: column; }
}3D变换
transform-style: preserve-3d配合rotateX/Y/Z实现三维空间变换。通过透视(perspective)属性控制景深效果。
.cube {
transform: rotateY(45deg);
perspective: 1000px;
}动画序列
@keyframes定义关键帧动画，通过animation属性控制持续时间、延迟和重复次数。可实现复杂的多阶段动态效果。
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}变量与计算
CSS自定义属性(--var)实现主题色等全局控制。calc()函数允许在样式中执行动态计算，增强布局灵活性。
:root {
--main-color: #3498db;
}
.element {
width: calc(100% - 2rem);
}混合模式
background-blend-mode和mix-blend-mode控制图层叠加效果。类似Photoshop的混合模式，能创建色彩融合或特殊纹理。
.overlay {
mix-blend-mode: multiply;
}
