使用 CSS 种植花卉图像 [关闭]答案

【问题标题】：Grow flower image with CSS [closed]使用 CSS 种植花卉图像 [关闭]
【发布时间】：2020-10-12 12:12:51
【问题描述】：

我有一张花卉 PNG 图像，想在屏幕上种植它。

一开始，我将高度设置为0到100%，图像异常增长。我想根据它的结构来生长它，因为我在图中显示了方向。

如何根据图像的自然生长方向生长图像？

【问题讨论】：

请阅读How to Ask并发布minimal reproducible example
好的，有什么问题？
如果您阅读minimal reproducible example，您就会知道问题出在哪里

标签： html css image frontend

【解决方案1】：

您可以为相同背景颜色的蒙版设置动画来获得此效果。

这是一个示例 sn-p。运行它并按reveal 来查看结果：

function reveal() {
  var maskElement = document.getElementById("mask");
  maskElement.classList.remove("covered");
  maskElement.classList.add("revealed");
}

function cover() {
  var maskElement = document.getElementById("mask");
  maskElement.classList.remove("revealed");
  maskElement.classList.add("covered");
}

.flower {
  height: 20rem;
  width: fit-content;
  position: relative;
  overflow: hidden;
}

.flower img {
  height: 100%;
}

.flower #mask {
  height: 100%;
  width: 300%;
  position: absolute;
  left: -200%;
  top: 0;
  background-color: #f6f6f6;
  transform-origin: top right;
  transition: 5s;
}

.flower #mask.covered {
  transform: rotate(0deg);
}

.flower #mask.revealed {
  transform: rotate(-90deg);
}

<div class="flower">
  <img src="https://i.stack.imgur.com/AvoNs.jpg" />
  <div id="mask" class="covered"></div>
</div>
<button onclick="reveal()">reveal</button>
<button onclick="cover()">cover</button>

【讨论】：