文字形状动画,如何做到滑动文本边界?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我正试图在一段文字上实现以下动画:

目的是为了动画化文本的边界根据左边的形状。这是我尝试过的,但我无法理解文本形状的转换:

.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>
提问于
用户回答回答于

免责声明:外形-外部属性不应在活动项目中使用。它可能会受到不良行为的影响。

这种布局可以通过动画shape-outsideclip-path特性...。这两个属性都可以转换成动画。

缺点是两者的浏览器支持都很低,这个动画只能在webkit浏览器中工作,因为Firefox和IE/Edge不支持shape-outside或者clip-path。

下面是一个例子(只有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%, 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%);
  
}
<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>

热门问答

脏字过滤只支持 TIMTextElem 消息,对自定义消息无效,请问有接口可以主动检查吗?

学生路人
推荐
您好,脏字检查的内容包括单聊和群组消息(只检查文本消息 TIMTextElem,不支持对自定义消息 TIMCustomElem 的过滤)、群名片、群组资料(群名称、群简介、群公告)用户资料和好友关系链中 bytes 类型的数据(如昵称、好友备注和好友分组等)。目前没有这样的接口喔...... 展开详请

怎么使用rsa?

Tina

腾讯云 · 产品经理 (已认证)

Go Serverless!
推荐
您好,可以在在本地安装rsa module后,将依赖一起打zip包上传SCF运行。https://pypi.org/project/rsa/ 在本地做SCF项目的编辑和部署,推荐您使用tcf cli,更加方便高效。 https://github.com/tencentyun/tc...... 展开详请

5.17 更新的备案材料下载是怎么回事?

为了减少下载错误的核验单模板,官网文档中《网站真实性核验单》下载入口已经下掉,可以按照如下方式操作: 1、在备案流程中——上传资料——核验单环节下载 2、在了解备案的省份、单位性质后,可在工单中提供对应省份的核验单模板给到你。 ... 展开详请

域名在腾讯备的案,解析的腾讯云,现在想把域名解析到别商家的服务器,腾讯云会把备案注销吗?

software微软、谷歌、腾讯、阿里、百度……
推荐

接入商都是有责任对备案进行定期核查的,核查中如果客户在腾讯云进行了备案未解析腾讯云服务器是需要重新解析腾讯云服务器的,否则会被取消接入,反之解析了服务器未进行备案各家接入商也是有相应的限制的,比如:腾讯云对未在腾讯云备案的域名会进行未备案阻断。

对象存储COS有没有日志功能?

Hyman Wang

腾讯云 · 高级产品经理 (已认证)

推荐已采纳

你的cos 是否开通了 CDN 加速,如果开通了CDN 加速,可以去 CDN 的控制台下: (统计分析 --- 监控 )页面下拉到底部,可以通过 URL 查看流量情况。

对象存储里的视频能在线播放么?

Jinqn

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

所属标签

扫码关注云+社区