css制作效果

CSS 制作效果的方法

阴影效果
使用 box-shadow 属性为元素添加阴影，参数依次为水平偏移、垂直偏移、模糊半径、阴影颜色。

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

渐变背景
通过 linear-gradient 或 radial-gradient 实现颜色渐变效果。

.gradient {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

动画效果
使用 @keyframes 定义动画，并通过 animation 属性应用到元素上。

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.element {
  animation: slide 2s infinite alternate;
}

悬停交互
通过 :hover 伪类实现鼠标悬停时的动态效果。

.button:hover {
  background-color: #4CAF50;
  transform: scale(1.05);
}

圆角与边框
利用 border-radius 创建圆角，结合 border 增强视觉效果。

.card {
  border-radius: 15px;
  border: 2px solid #ddd;
}

过渡效果
通过 transition 平滑属性变化，如颜色、大小等。

.link {
  transition: color 0.3s ease;
}
.link:hover {
  color: #ff5722;
}

3D 变换
使用 transform 实现旋转、缩放等 3D 效果。

.cube {
  transform: rotateY(45deg) perspective(500px);
}

文字特效
通过 text-shadow 或 background-clip 实现创意文字样式。

.text {
  text-shadow: 2px 2px 4px #000;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #ff00cc, #3333ff);
}

响应式设计
结合媒体查询（@media）适配不同屏幕尺寸。

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

自定义变量
使用 CSS 变量（--*）统一管理样式值。

:root {
  --primary-color: #6200ee;
}
.header {
  background-color: var(--primary-color);
}