当前位置：首页 > CSS

css制作动漫岛

2026-03-12 10:26:13CSS

CSS 制作动漫岛效果

使用CSS可以创建动漫风格的岛屿效果，主要通过渐变、阴影和形状组合实现。以下是具体实现方法：

岛屿基础形状

使用border-radius和box-shadow创建岛屿的不规则形状：

.island {
  width: 300px;
  height: 150px;
  background: #8BC34A;
  border-radius: 50% 50% 0 0;
  box-shadow: 
    0 -10px 20px rgba(0,0,0,0.2),
    inset 0 -10px 20px rgba(0,100,0,0.3);
  position: relative;
}

添加立体效果

通过多重阴影和渐变增强立体感：

.island::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 10%;
  width: 80%;
  height: 40px;
  background: linear-gradient(to right, #5D4037, #8D6E63);
  border-radius: 0 0 50% 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

水面效果

使用伪元素创建波浪状水面：

.island::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 30px;
  background: #00BCD4;
  border-radius: 50%;
  opacity: 0.8;
  box-shadow: 
    0 10px 15px -5px rgba(0,0,0,0.2),
    inset 0 5px 10px rgba(255,255,255,0.5);
}

动画效果

添加CSS动画使水面波动：

css制作动漫岛

@keyframes wave {
  0% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-5px) scaleX(1.05); }
  100% { transform: translateY(0) scaleX(1); }
}

.island::after {
  animation: wave 3s ease-in-out infinite;
}

完整示例

<div class="island"></div>

<style>
.island {
  width: 300px;
  height: 150px;
  background: #8BC34A;
  border-radius: 50% 50% 0 0;
  box-shadow: 
    0 -10px 20px rgba(0,0,0,0.2),
    inset 0 -10px 20px rgba(0,100,0,0.3);
  position: relative;
  margin: 100px auto;
}

.island::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 10%;
  width: 80%;
  height: 40px;
  background: linear-gradient(to right, #5D4037, #8D6E63);
  border-radius: 0 0 50% 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.island::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 30px;
  background: #00BCD4;
  border-radius: 50%;
  opacity: 0.8;
  box-shadow: 
    0 10px 15px -5px rgba(0,0,0,0.2),
    inset 0 5px 10px rgba(255,255,255,0.5);
  animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
  0% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-5px) scaleX(1.05); }
  100% { transform: translateY(0) scaleX(1); }
}
</style>