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

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

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

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

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

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

热门问答

腾讯云 COS 怎么才能外链调用 m3u8 到别的网站播放?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
设置公有读私有写:当访问对象时,COS 读取到对象的权限为公有读,此时无论存储桶为何种权限,对象都可以被直接下载 设置步骤 登录 对象存储控制台,选择左侧菜单栏【存储桶列表】,进入存储桶列表页面。单击需要修改对象权限的对应存储桶,进入存储桶。 📷 找到需要设置权限的对象(如 e...... 展开详请

Ubuntu搭建的WordPress如何修改php.ini?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
php新手很多不知道怎么查配置文件在哪,这里提供一个很简单的方法 使用 php -i 命令可以打印php的详细信息,可以把这堆东西输出一下 php -i > outputphp.txt,结合 grep 查找命令 php -i| grep php.ini 打印结果如下 Config...... 展开详请

归档存储采用的存储介质是什么, 安全可靠吗?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
归档存储主要是针对海量、重要且访问频率极低的非结构化数据进行长期的归档保存和备份管理。 在数据安全层面,归档存储提供数据锁定机制,防止数据被修改和删除,保障数据安全。 技术架构: image.png 与对象存储的差异 归档存储 CAS 是一项离线存储服务,不同于在线的对象存储 ...... 展开详请

在按官网手册排错后依然提示1004错误?

看你的代码好像是短信相关的代码,1004错误代表请求包解析失败,通常情况下是由于没有遵守 API 接口说明规范导致的。 建议您通过以下方式定位解决: 首先,要确认发送的请求是否是标准的 json 格式; 第二,检查是否有将单引号当做双引号使用(json 标准应该是双引号); 第...... 展开详请

redis数据库应该怎样连接???

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
实例初始化完成后,连接腾讯云Redis时,需要输入设置的密码。主从版和集群版的连接示例如下 主从版连接示例 主从版支持2种格式 • 格式1,“实例id:密码”的格式类型,例如您的实例id是crs-bkuza6i3,设置的密码是abcd1234,则连接命令如下 redis-cli ...... 展开详请

如何使用holer实现从外网访问本地WEB应用?

Dingda

Dingda · 站长 (已认证)

多一些不为什么的坚持
推荐
解压holer软件 获取holer access key信息: 在holer官网上申请专属的holer access key或者使用开源社区上公开的access key信息。 启动holer服务: Windows系统平台: 打开CMD窗口进入可执行程序所在的目录下,执行命令:...... 展开详请

所属标签

扫码关注云+社区