当前位置：首页 > CSS

css手工制作

2026-01-28 01:33:25CSS

使用纯CSS手工制作常见元素

圆形制作 通过设置border-radius为50%可将元素变为圆形，需配合固定宽高：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
}

三角形制作 利用边框透明特性创建三角形，通过设置不同方向的边框宽度：

css手工制作

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

CSS手工绘制复杂图形

心形图案 结合伪元素和旋转变形实现：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart:before, .heart:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: #ff0000;
  border-radius: 50px 50px 0 0;
}
.heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

加载动画制作 使用关键帧动画创建旋转加载器：

css手工制作

.loader {
  width: 60px;
  height: 60px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

响应式手工组件

纯CSS开关按钮 利用复选框 hack 实现交互式开关：

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  content: "";
  position: absolute;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {
  transform: translateX(26px);
}

工具提示效果 通过伪元素创建悬浮提示：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}