css制作效果

CSS 制作常见效果的方法

阴影效果
使用 box-shadow 属性为元素添加阴影，支持内阴影和外阴影。

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

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

.gradient {
  background: linear-gradient(90deg, #ff0000, #00ff00);
}

动画效果
结合 @keyframes 和 animation 属性创建动画。

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

悬停交互
利用 :hover 伪类实现鼠标悬停效果。

.button:hover {
  background-color: #555;
  transform: scale(1.1);
}

圆角与边框
通过 border-radius 设置圆角，border 定义边框样式。

.rounded {
  border-radius: 10px;
  border: 2px solid #000;
}

响应式布局
使用媒体查询 (@media) 适配不同屏幕尺寸。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

文字特效
通过 text-shadow 或 background-clip 实现文字装饰。

.text {
  text-shadow: 2px 2px 4px #000;
  background-clip: text;
  color: transparent;
}

3D 变换
使用 transform 属性实现旋转或透视效果。

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

过渡效果
通过 transition 平滑切换属性变化。

.item {
  transition: all 0.3s ease-in-out;
}