当前位置：首页 > CSS

css制作效果

2026-02-13 05:39:12CSS

CSS 制作常见效果的方法

阴影效果
使用 box-shadow 属性为元素添加阴影：

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

水平偏移 5px，垂直偏移 5px，模糊半径 10px，颜色为半透明黑色。

渐变背景
通过 linear-gradient 或 radial-gradient 实现渐变：

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

方向为从左到右，颜色从 #ff7e5f 过渡到 #feb47b。

悬停动画
结合 transition 和 :hover 伪类实现平滑动画：

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

悬停时按钮放大 1.1 倍，动画时长 0.3 秒。

自定义加载动画
使用 @keyframes 创建旋转动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

元素无限循环旋转，每次周期 2 秒。

响应式网格布局
通过 grid-template-columns 实现自适应网格：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

每列最小宽度 200px，自动填充剩余空间，间距 16px。

文本特效
为文字添加描边或背景剪辑效果：

.text-stroke {
  -webkit-text-stroke: 1px #000;
  color: transparent;
}
.clip-text {
  background: linear-gradient(to right, #ff00cc, #3333ff);
  -webkit-background-clip: text;
  color: transparent;
}

第一例为文字描边，第二例实现渐变文字效果。

3D 变换
利用 transform 实现 3D 空间效果：

.card {
  transform: perspective(500px) rotateY(20deg);
}

元素沿 Y 轴旋转 20 度，并添加 500px 的透视距离。

暗黑模式切换
通过 CSS 变量和媒体查询实现主题切换：

css制作效果

:root {
  --bg-color: #fff;
  --text-color: #333;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222;
    --text-color: #eee;
  }
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}

根据系统偏好自动切换亮暗主题。