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

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

CSS

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

这两个元素是

请注意，这在 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>

Answer 2

Disclaimer : The shape-outside property should not be used in live projects¹. It may be subject to undesired behaviours.

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

缺点是两者对浏览器的支持都非常低，如今，此动画只能在 webkit 浏览器中运行，如 Firefox，IE/Edge 不支持 shape-outside property or the 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 月）的状态为“候选推荐”。因为这意味着它是一项正在进行的工作，它可能随时更改，因此除了测试之外不应使用。}

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

Text shape animation, animating shape-outside

css

css-transitions

css-animations

css-shapes

CSS

SVG