纯css制作

纯CSS制作常见效果示例

纯CSS可以实现许多视觉效果，无需JavaScript。以下是几种常见效果的实现方法：

悬停动画效果 通过:hover伪类触发过渡或动画：

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

下拉菜单 利用相邻选择器和:hover状态：

.menu-item:hover .submenu {
  display: block;
}
.submenu {
  display: none;
  position: absolute;
}

模态框 通过:target伪类实现：

.modal {
  display: none;
  position: fixed;
}
.modal:target {
  display: block;
}

响应式布局 使用媒体查询适应不同屏幕：

.container {
  width: 100%;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

CSS绘制图形 利用边框和伪元素创建形状：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

加载动画 使用关键帧动画：

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

标签页切换 利用:checked状态和相邻选择器：

.tab-content {
  display: none;
}
input[type="radio"]:checked + .tab-content {
  display: block;
}

工具提示 通过伪元素和绝对定位：

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: black;
  color: white;
}

这些方法展示了CSS的强大功能，通过合理组合选择器、伪类和动画属性，可以创建丰富的交互效果。现代CSS特性如Grid、Flexbox和自定义属性进一步扩展了可能性。