html - 在CSS中反转动画的起点和终点-6ren

html - 在CSS中反转动画的起点和终点

转载作者：行者123 更新时间：2023-11-28 14:44:12

25

4

我需要帮助，我将此动画用于线条，现在我需要反转起点和终点。现在，我需要在绘制开始的地方结束，现在我需要在绘制线结束的地方开始，基本上反转我使用的动画中绘制线的起点和终点。

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>

最佳答案

像这样反转 stroke-dashoffset 添加一个 from 和 to

  from {
    stroke-dashoffset: -1000;
  }
  to {
    stroke-dashoffset: 0;
  }

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  
  from {
    stroke-dashoffset: -1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
  </svg>
</body>
</html>

关于html - 在CSS中反转动画的起点和终点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52516349/

25

4

0

文章推荐： html - 列周围的样式表

文章推荐： javascript - React.js : Why child component change parent state?

文章推荐： javascript - 将 borderRadius 传递给react-native

文章推荐： css - $document->addStyleSheet 弃用

java - 反/序列化二进制数据
我目前正在对一个 mmorpg 的二进制网络协议(protocol)进行逆向工程。我正在用 java 实现该协议(protocol)。对于每个数据包类型，我将创建一个表示二进制数据的类。例如，聊天
c# - (反)序列化对象的属性而不获取对象的其余部分
我正在尝试围绕现有类编写半透明包装器，我希望它能够模仿其他类的序列化。例如，给定以下类: class Foo { [JsonConverter(CustomConverter)] s
java - (反)序列化枚举集
是否有使用 Jackson 序列化和反序列化枚举集的简单方法？ private enum Type { YES, NO } @JacksonXmlProperty(localName = "t
Java(反)序列化过程
我很想知道当我们反序列化一个对象时会发生什么。例如，如果我的类对象由许多其他对象组成，对象创建过程如何在反序列化过程中发生最佳答案对象是用默认的初始化字段创建的，然后用从串行流中获取的属性值填充
c++ - (反)序列化枚举类
我正在尝试序列化和反序列化(使用 QDataStream 但这与这里无关)一个 enum class变量: enum class Type : char { Trivial, Comp
c++ - 编译麻烦c转c++反
我不确定这到底有什么问题...它不会为我编译，我将它从 c 翻译成 C++(或尝试)...是的，我是初学者。谢谢! #include #include using namespace std; i
json4s - json4s中是否有针对UUID的开箱即用的(反)序列化器？
我遇到的问题与此处描述的问题非常相似:Combining type and field serializers case class(id: Option[UUID], otherValue:Stri
r - 在(反)对角线上应用函数
我们知道base中的apply()可以对数组的边距应用一个函数，边距应该是行或列。我想将边距扩大到“对角线” 和“反对角线”。结构看起来像 diagApply <- function(x, FUN,
json - 如何(反)序列化对象列表？
我找到了 JSON serialization and deserialization to objects in Flutter 的例子但是如何使用像这样的人员列表来做到这一点: [ {
elasticsearch - elasticsearch必须与MUST_NOT(反)差异
我有一个相当大的terms聚合结果，这些结果被加载到下拉列表中以提供filter功能。可以说，我的下拉列表中有4000多种动物。我的另一个下拉列表有4种动物颜色。例， animal --> ["d
c# - 如何(反)序列化具有字符串数组值的可序列化字典？
我需要将 C# (.NET Framework 4.5.2) 中的一个类与 XML 序列化(反序列化)，该类具有 string 的字典属性。键和 string[]数组值。我正在使用 Serializa
c# - 使用json(反)序列化多个对象时的空问题
[已解决]应用给定的解决方案，效果很好! 程序的目的:在用户打开和关闭程序时保存/重新加载以前的数据。我曾经用一个对象(obj)成功(反)序列化，现在我有两个不同类的不同对象。我试图通过查看其他帖
c# - 通过属性在(反)序列化期间控制枚举值格式
问题假设我有一个代表某事或其他的枚举: public enum ResultState { Found, Deleted, NotFound } 在我的序列化 json 中，
javascript - 反 JSON 字符串
是否有取消 JSON 字符串的功能？我猜它不会内置到 JQuery 中，但它可以通过编写一个操纵字符串的脚本来实现吗？我在下面遇到了这个问题。我正在使用 NYTimes API，但它不支持 JSON
java - Java(反)序列化是原子的吗？
对于这个问题，假设当对象完全写入流并成功读出时，或者当对象部分写入流并且读回对象时发生异常时，序列化/反序列化是原子的。假设写操作可能无法成功完成，例如因为停电了。在Serializable的描述中
c - 反 VM 的时间检查效果不佳？
有谁知道时序检查是否仍在检测虚拟环境？我尝试使用 rdtsc 指令来获取 cpu 周期并比较真实 linux 机器和在 virtualbox 上运行的 linux 之间的结果。但结果似乎不稳定。有时，
c# - XML-(反)序列化整数的列表属性作为简单的分隔符分隔序列
我正在对一个(外部给定的)XML 文件进行操作，该文件具有以下形式的元素 10 20 30 40 50 60 70 80 我知道如何将属性作为属性处理(通过使用 [XmlAttri
c# - XML(反)序列化错误命名空间
我有一个通用的序列化器和反序列化器，用于通过网络连接发送的消息: public static async Task SerializeObject(Object obj) {
c# - (反)序列化特定子类而不使用 [ProtoInclude]
我正在考虑将当前基于 WCF 的应用程序迁移到 protobuf-net.Grpc。这似乎是可行的，但是我无法在不包含所有具有 [ProtoInclude] 属性的派生类的情况下使(DTO 类)基类的
c# - 保存的文件包含(反)斜杠
我正在尝试将一些数据保存到文件中，但文件保存到的目录不正确。 using (StreamWriter sw = new StreamWriter(dir + "\\temp" + x + ".txt"

首页

博学

6Ren·AI

商城

html - 在CSS中反转动画的起点和终点