初学者的简单立体主义风景画 - Html(1)

📌 相关文章

📜 初学者的简单立体主义风景画 - Html(1)

📅 最后修改于: 2023-12-03 15:22:41.871000 🧑 作者: Mango

初学者的简单立体主义风景画 - Html

简介

立体主义（Cubism）是20世纪初法国画家毕加索和勒杜兹等人创造的一种艺术风格，其特点是将物体分解成几何图形再重新组合，从而达到形态上的简化和变化。本文将介绍如何用 Html 制作一幅简单的立体主义风景画。

准备工作

在制作风景画之前，我们需要准备以下三张图片：

山
太阳
湖

可以在网络上找到相关的图片并保存到本地。

Html 代码

首先，我们需要创建一个 Html 页面。在 Html 页面中，我们可以使用图片元素 img 来显示图片。

<!DOCTYPE html>
<html>
  <head>
    <title>初学者的简单立体主义风景画</title>
  </head>
  <body>
    <img src="path/to/mountain.jpg">
    <img src="path/to/sun.jpg">
    <img src="path/to/lake.jpg">
  </body>
</html>

以上代码会显示三张图片，但是它们并没有任何变形和组合，还无法达到立体主义风格的效果。下面，我们会通过一些简单的 Css 属性来实现。

<!DOCTYPE html>
<html>
  <head>
    <title>初学者的简单立体主义风景画</title>
    <style>
      img:nth-child(1) {
        transform: rotate(10deg) translateY(-50px);
      }
      img:nth-child(2) {
        transform: rotate(20deg) translateY(-100px);
      }
      img:nth-child(3) {
        transform: rotate(-10deg) translateY(-75px);
      }
    </style>
  </head>
  <body>
    <img src="path/to/mountain.jpg">
    <img src="path/to/sun.jpg">
    <img src="path/to/lake.jpg">
  </body>
</html>

以上代码通过 transform 属性对三张图片进行变形和组合，从而实现立体主义的效果。其中 translateY 属性用于改变图片的上下位置，rotate 属性用于沿着图片的中心点旋转。修改 translateY 和 rotate 的值可以得到不同的效果。

结语

通过以上代码，我们可以制作一幅简单的立体主义风景画。虽然仅仅是一些简单的变形和组合，但是也能在一定程度上体现出立体主义艺术风格的特点。