文本形状动画，为外形设置动画

Question

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我不太了解 CSS 过渡和动画，所以我希望得到一些帮助。

Answer 1

  

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

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

缺点是两者都有非常低的浏览器支持，而今天，这个动画只适用于webkit浏览器，因为Firefox和IE / Edge不支持shape-outside property或clip-path property带{ {1}}值。

以下是（仅限webkit）：

的示例

polygon()

.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;
  -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
          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: clip-path 1s, shape-outside 1s;
  transition: -webkit-clip-path 1s, shape-outside 1s;
}
.element:hover{
  -webkit-shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
          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%);
  
}

¹ _{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>