css圆角水滴制作

使用 CSS 制作圆角水滴形状

通过 CSS 的 border-radius 和 transform 属性可以轻松实现圆角水滴效果。以下是具体实现方法：

HTML 结构

<div class="water-drop"></div>

CSS 样式

.water-drop {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 50% 0 50% 50%;
  transform: rotate(45deg);
}

添加阴影增强立体感

通过 box-shadow 可以为水滴添加立体效果：

.water-drop {
  /* 基础样式同上 */
  box-shadow: 
    inset -10px -10px 20px rgba(0,0,0,0.2),
    0 0 10px rgba(52,152,219,0.5);
}

使用伪元素创建反光效果

通过伪元素可以增加水滴的真实感：

.water-drop::after {
  content: '';
  position: absolute;
  width: 30%;
  height: 30%;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  top: 10%;
  left: 10%;
}

制作动态水滴动画

添加 CSS 动画让水滴更有活力：

@keyframes drop {
  0% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.1); }
  100% { transform: rotate(45deg) scale(1); }
}

.water-drop {
  animation: drop 2s infinite ease-in-out;
}

响应式水滴尺寸

使用 vw 单位使水滴尺寸随视口变化：

.water-drop {
  width: 10vw;
  height: 10vw;
  /* 其他样式保持不变 */
}

这些方法可以组合使用，根据具体需求调整参数值，创造出各种不同风格的圆角水滴效果。