[分享]css3扁平风景画

CSS3扁平风景画是使用CSS3新特性，绘制具有扁平化风格的画作。与传统绘画不同，CSS3扁平风景画使用代码的方式来绘制图像，通过灵活操控CSS3样式，可以实现想象中的各种风景画。/ 使用CSS3绘制...

CSS3扁平风景画是使用CSS3新特性，绘制具有扁平化风格的画作。与传统绘画不同，CSS3扁平风景画使用代码的方式来绘制图像，通过灵活操控CSS3样式，可以实现想象中的各种风景画。

/* 使用CSS3绘制扁平化小树 */
.tree {
  width: 150px;
  height: 180px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.tree .trunk {
  width: 20px;
  height: 80px;
  background-color: #9b4a0b;
  position: absolute;
  bottom: 0;
  left: 65px;
}

.tree .leaves {
  width: 120px;
  height: 120px;
  position: absolute;
  top: -50px;
  left: 15px;
  border-radius: 50%;
  background-color: #007500;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

/* 使用CSS3绘制扁平化山景 */
.mountain {
  width: 400px;
  height: 300px;
  background-color: #1b1b1b;
  position: relative;
}

.mountain .white-mountain {
  width: 180px;
  height: 180px;
  position: absolute;
  top: -100px;
  left: 30px;
  background-color: #fff;
  border-radius: 50%;
}

.mountain .peak {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: 130px;
  background-color: #ffdb58;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.mountain .hill {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  left: 150px;
  background-color: #8b7765;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
} 

通过上述代码，我们可以绘制出小树和山景两张扁平风景画。在代码中，我们使用了众多CSS3样式，包括border-radius、box-shadow等。这些样式使得画面看起来更加真实，给人以舒适的感觉。同时，我们也在代码中充分运用了层叠样式（position）和盒模型，通过控制元素的位置和大小，使画面看起来更加贴近自然。

扁平化风格已经成为近些年来设计界的流行趋势，而CSS3扁平风景画则是在这一潮流中应运而生的新型绘画形式。相较于传统绘画，CSS3扁平风景画无需任何纸张和颜料，甚至都不需要绘画技能，通过一些简单的CSS3代码即可完成自己想象中的风景画。这不仅大大降低了制作成本，也为广大爱好者提供了更多的创作空间。