css – 文字形状动画,动画外观

我试图在段落的文本上实现以下动画：

目的是根据左边的形状动画文字的边界。这是我尝试过的，但我无法弄清文本形状的转换：

.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转换和动画的知识，所以我希望得到一些帮助。

解决方法

disclaimer : The 07000 property should not be used in live projects¹. It may be subject to undesired behavIoUrs.

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

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

这是一个例子(仅限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;
  -webkit-shape-outside: polygon(0% 0%,100% 0%,100% 100%,0 100%);
          shape-outside: polygon(0% 0%,0 100%);
  -webkit-clip-path:polygon(0% 0%,0 100%);
          clip-path:polygon(0% 0%,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%,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,and more recently with desktop publishing software.
</div>

1 CSS Shapes Module Level 1目前(2016年10月)具有“候选推荐”的状态。这意味着它是一项正在进行的工作，它可能随时改变，因此不应该被用于测试以外。

原文地址：https://www.jb51.cc/css/218416.html