文本形状动画，动画形状外部

Question

我正在尝试在段落文本上实现以下动画：

目的是根据左侧的形状为文本的边界设置动画。这是我尝试过的，但我无法弄清楚文本形状的过渡：

.mainDiv {
  width: 600px;
  margin: 0px auto;
  border: solid 1px #000;
  padding: 10px;
  min-height: 200px;
}
.element {
  width: 200px;
  height: 200px;
  background: #e3f5f1;
  float: left;
  margin-right: 5px;
}
.textElement {
  width: 395px;
  float: left;
}

<div class="mainDiv">
  <div class="element"></div>
  <div class="textElement">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
  </div>
</div>

我对CSS过渡和动画了解不多，希望能得到一些帮助。

Answer 1

免责声明： shape-outside 属性不应在实际项目中使用¹。它可能会受到不良行为的影响。

这种布局可以通过为shape-outside 和clip-path 属性设置动画 来实现。这两个属性都可以转换来制作动画。

缺点是两者的浏览器支持都非常低，今天，这个动画只能在 webkit 浏览器中工作，因为 Firefox 和 IE/Edge 不支持 shape-outside property 或 clip-path property 的 polygon() 值。

这是一个示例（仅限 webkit）：

.mainDiv{
  width:600px;
  margin:0px auto;
  border:solid 1px #000;
  padding:10px;
  min-height:200px;
}
.element{
  width:200px;
  height:200px;
  background:#e3f5f1;
  float:left;
  margin-right:5px;
  shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  transition: clip-path 1s, shape-outside 1s;
}
.mainDiv:hover .element {
  shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
  clip-path:polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);  
}

<div class="mainDiv">
  <div class="element"></div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
</div>

¹_{CSS Shapes Module Level 1 目前（2016 年 10 月）的状态为“候选人推荐”。由于这意味着它是一项正在进行的工作，它可能随时更改，因此不应用于测试以外的其他用途。}

Answer 2

CSS

为此，您需要在 CSS 中使用一些新的且大部分不受支持的元素来实现您想要的效果。

这两个元素是

• shape-outside
• clip-path

请注意，这不适用于 FF，但我认为它不会太远。

.mainDiv {
  width: 600px;
  margin: 0px auto;
  border: solid 1px #000;
  padding: 10px;
  min-height: 200px;
}
.element {
  width: 200px;
  height: 200px;
  background: #e3f5f1;
  float: left;
  margin-right: 5px;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s, clip-path 1s, -webkit-clip-path 1s;
}
.element:hover {
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

<div class="mainDiv">
  <div class="element"></div>
  <div class="textElement">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
  </div>
</div>

---

SVG

保证您的页面在所有浏览器上都能正常工作的最佳方法可能是使用 SVG。这就是您正在寻找的那种动画。

<svg viewbox="0 0 100 100" width="20%">
  <path id="square" d="M0,0 L100,0 L100,100 L0,100z" fill="#e3f5f1">
    <animate attributeName="d" attributeType="XML" begin="mouseover" dur="1s" to="M0,0 L100,50 L100,50 L0,100z" fill="freeze" />
    <animate attributeName="d" attributeType="XML" begin="mouseout" dur="1s" to="M0,0 L100,0 L100,100 L0,100z" fill="freeze" />
  </path>
</svg>