css标题制作

使用CSS制作标题的基础方法

设置标题的字体大小和颜色
通过font-size和color属性可以调整标题的尺寸和颜色。例如：

h1 {
  font-size: 2.5rem;
  color: #333;
}

添加标题背景和边框
使用background-color和border属性为标题添加视觉效果：

h2 {
  background-color: #f5f5f5;
  border-left: 4px solid #3498db;
  padding: 10px;
}

创建特殊效果的标题

阴影效果
text-shadow属性可以为标题添加阴影：

h3 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

渐变文字
结合背景渐变和-webkit-background-clip实现：

h4 {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

响应式标题设计

使用视窗单位
vw单位使标题随视窗大小变化：

h5 {
  font-size: 5vw;
}

媒体查询调整
在不同屏幕尺寸下改变标题样式：

@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
}

动画标题效果

悬停动画
添加简单的悬停效果：

h6:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

关键帧动画
使用@keyframes创建更复杂的动画：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.animated-title {
  animation: pulse 2s infinite;
}