css制作粉色泡泡

使用CSS制作粉色泡泡效果

通过CSS的border-radius、box-shadow和动画属性可以轻松实现粉色泡泡效果。以下是具体实现方法：

基础泡泡样式

.bubble {
  width: 100px;
  height: 100px;
  background-color: #ffc0cb; /* 粉色基础色 */
  border-radius: 50%; /* 圆形 */
  position: absolute;
}

添加立体感

.bubble {
  box-shadow: 
    inset 5px 5px 10px rgba(255,255,255,0.5), /* 内部高光 */
    inset -5px -5px 10px rgba(0,0,0,0.1), /* 内部阴影 */
    0 0 20px rgba(255,192,203,0.8); /* 外部发光 */
}

动画效果

@keyframes float {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.bubble {
  animation: float 3s ease-in-out infinite;
}

进阶效果（多个随机泡泡）

<div class="bubble-container">
  <div class="bubble" style="left:10%; animation-delay:0s"></div>
  <div class="bubble" style="left:30%; animation-delay:1s"></div>
  <div class="bubble" style="left:70%; animation-delay:0.5s"></div>
</div>

.bubble-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.bubble {
  /* 基础样式 */
  width: var(--size, 80px);
  height: var(--size, 80px);
  background-color: rgba(255,192,203,0.7);
  border-radius: 50%;
  position: absolute;
  bottom: 0;

  /* 随机大小和动画 */
  animation: float var(--duration, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

高级技巧（SCSS版本）

@mixin bubble($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
  border-radius: 50%;
  position: absolute;
  box-shadow: 
    inset 5px 5px 10px rgba(255,255,255,0.5),
    inset -5px -5px 10px rgba(0,0,0,0.1),
    0 0 20px rgba($color, 0.8);
  animation: float #{random(5) + 3}s ease-in-out infinite;
}

@for $i from 1 through 10 {
  .bubble:nth-child(#{$i}) {
    @include bubble(random(100)+50px, rgba(255,192,203, random(0.3)+0.5));
    left: random(90) + 5%;
    bottom: -10%;
    animation-delay: random(5) + s;
  }
}

这些方法可以创建出从简单到复杂的粉色泡泡效果，适用于网页装饰、加载动画等场景。调整颜色透明度、阴影参数和动画时间可以获得不同风格的泡泡效果。