主页 / 问题 / 808075
Accepted
Arthur
Asked:2020-04-02 02:52:11 +0000 UTC2020-04-02 02:52:11 +0000 UTC

如何制作文字破解效果

  • 772

此 QA 是过去的延续（文本样式SVG）。

在这个 QA (Question-Answer) 中，我们将看到Crack effect，下面将给出这种效果的示例，总共有 3 个。

第一个例子（沿着文本出现裂缝并进一步转换）：

在此处输入图像描述

第二个例子（文字的上半部分在挥剑后折断并平滑滑出，尽管文字本身的角度应该在 10 左右1-2deg）：

在此处输入图像描述

第三个例子（与第二个类似，但有区别，有两个笔划沿和横跨文本）：

在此处输入图像描述

文本将在 上实现SVG，放置通过clipPath，动画通过@keyframes。

PS点击后所有示例都可以使用。

html

3 个回答

  1. 第二个例子：

    • 在这个例子中，使用了相同的定位，除了你需要rect在1deg点击添加之后 旋转transform: translateX(N)：

    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

svg text {
  font-family: 'Russo One', sans-serif;
  text-transform: uppercase;
  font-size: 4em;
  pointer-events: none;
}

svg rect {
  transform: rotate(-1deg);
  transition: cubic-bezier(1, 0.3, 0.6, 1) 3.5s;
}

#top { 
  animation: offsetXF 1s infinite;
}

#bottom { 
  animation: offsetXT 1s infinite;
}

@keyframes offsetXF {
  50% {
    transform: translateX(-30px) rotate(-1deg);
    opacity: 0;
  }
}

@keyframes offsetXT {
  50% {
    transform: translateX(30px) rotate(-1deg);
    opacity: 0;
  }
}
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<svg viewBox="0 0 710 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <text text-anchor="middle" x="50%" y="49%">Breaking text</text>
    </clipPath>
  </defs>
  <g>
  <!--Смещение по оси X-->
    <rect id="top" clip-path="url(#clip)" width="710" height="50" y="26" fill="white"/>
    <rect id="bottom" clip-path="url(#clip)" width="710" height="50" y="75" fill="white"/>
  </g>
</svg>

    • 仍有待完成polygon，这将模拟用剑（或武士刀：D）挥动，在本示例的最终版本中，我们还将沿轴移动它X，大约移动700-800px：

    <svg viewBox="0 0 710 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon id="sword" points="0,75 55,67 70,75 56,80" fill="silver" transform="scale(2)"/>
</svg>

    • 最终版本。点击之后，我们改变了 的位置polygon，同时为 增加了一个类#top，这就是为什么文本的顶部发生了移位，并且滑动后也有延迟，因为rect添加了 y transition-delay：

    function crack() {
  var rect = document.getElementById("top");
  var polygon = document.getElementById("sword");
  rect.classList.add("active");
  polygon.classList.add("_activate");
}
    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

svg text {
  font-family: 'Russo One', sans-serif;
  text-transform: uppercase;
  font-size: 4em;
  pointer-events: none;
}

svg rect {
  transform: rotate(-1deg);
  transition: cubic-bezier(1, 0.3, 0.6, 1) 3.5s;
  transition-delay: 1s;
}

#top.active {
  transform: translateX(-30px) rotate(-1deg);
  opacity: 0;
}

#sword {
  transform: rotate(-1deg) translateX(-100px);
}

#sword._activate {
  animation: attack 0.4s 1;
}

@keyframes attack {
  to {
    transform: rotate(-1deg) translateX(750px);
  }
}
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<svg viewBox="0 0 710 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <text text-anchor="middle" x="50%" y="49%">Breaking text</text>
    </clipPath>
  </defs>
  <g onclick="crack()">
    <rect id="top" clip-path="url(#clip)" width="710" height="50" y="26" fill="white"/>
    <rect clip-path="url(#clip)" width="710" height="50" y="75" fill="white"/>
    <polygon id="sword" points="0,75 55,67 70,75 56,80" fill="silver"/>
  </g>
</svg>

    • 14
  2. Best Answer

    第一个例子：

    • 文本的两个部分都在 中rect，我们用 将文本本身插入其中clipPath，然后将它们沿轴定位Y，这里是定位文本前半部分和后半部分的示例：

    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg text {
  font-family: 'Russo One', sans-serif;
  text-transform: uppercase;
  font-size: 5em;
  pointer-events: none;
  user-select: none;
}
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<svg width="710" height="200" viewBox="0 0 710 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <text text-anchor="middle" x="50%" y="50%">Breaking text</text>
    </clipPath>
  </defs>
  <rect id="top" class="rectangle" clip-path="url(#clip)" width="710" height="50" fill="white">
  <!--Смещение по оси Y-->
  <animate attributeName="y" values="-10;26;-10" dur="3s" repeatCount="indefinite"/>
  </rect>
  <rect id="bottom" class="rectangle" clip-path="url(#clip)" width="710" height="50" fill="white">
  <!--Смещение по оси Y-->
  <animate attributeName="y" values="103;75;103" dur="3s" repeatCount="indefinite"/>
  </rect>
</svg>

    • 定位文本后，让我们使用 CSS 属性制作一个简单的动画 -transform并添加transition，即 cubic-bezier. 但首先，我们将遍历每个rect'y 并给他们一个类active：

    function crack() {
  var rect = document.getElementsByTagName("rect");
  Array.from(rect).forEach(x => x.classList.toggle("active"));
}
    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg text {
  font-family: 'Russo One', sans-serif;
  text-transform: uppercase;
  font-size: 5em;
  pointer-events: none;
  user-select: none;
}

svg rect {
  transition: cubic-bezier(0.1, 0.3, 0.5, 1) .1s;
}

rect.active {
  transform: translateX(-3px) rotate(-0.15deg);
}

rect.active:last-child {
  transform: translateX(3px) rotate(0.15deg);
}
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<svg width="710" height="200" viewBox="0 0 710 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <text text-anchor="middle" x="50%" y="50%">Breaking text</text>
    </clipPath>
  </defs>
  <g onclick="crack()">
    <rect id="top" class="rectangle" clip-path="url(#clip)" width="710" height="50" y="26" fill="white"/>
    <rect id="bottom" class="rectangle" clip-path="url(#clip)" width="710" height="50" y="75" fill="white"/>
  </g>
</svg>

    • 14

  3. 第三个例子：

    • 而不是两个rect，我们将使用四个，对于我制作的每两个部分clipPath（我没有找到更好的方法，我会很高兴关于如何使其“更清洁”:) 的建议：
      PS大约是我们应该得到的。

    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

svg rect {
  fill: white;
}
    <svg viewBox="-30 0 740 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- FOUR RECTS -->
  <g>
    <rect clip-path="url(#clip)" width="336" height="50" y="26">
      <animateTransform attributeName="transform" type="translate" values="0 0; -20 -20; 0 0" dur="3s" repeatCount="indefinite"/>
    </rect>
    <rect clip-path="url(#clip)" width="336" height="50" y="75">
      <animateTransform attributeName="transform" type="translate" values="0 0; -20 20; 0 0" dur="3s" repeatCount="indefinite"/>
    </rect>
    <rect clip-path="url(#clip)" width="336" height="50" x="336" y="26">
      <animateTransform attributeName="transform" type="translate" values="0 0; 20 -20; 0 0" dur="3s" repeatCount="indefinite"/> 
    </rect>
    <rect clip-path="url(#clip)" width="336" x="336" height="50" y="75">
      <animateTransform attributeName="transform" type="translate" values="0 0; 20 20; 0 0" dur="3s" repeatCount="indefinite"/> 
    </rect>
  </g>
</svg>

    • 这三个例子都是相似的，所以没有必要重复rect添加类来模仿波浪和其余部分（不要认为它是懒惰:)））），其实看看：

    function doubleCrack() {
  var rect = document.getElementsByTagName("rect");
  var polygon = document.getElementById("horizontal");
  var polygonTwo = document.getElementById("vertical");

  polygon.classList.add("_activate");
  polygonTwo.classList.add("_activate");

  Array.from(rect).forEach(x => x.classList.add("_activate-rect"));
}
    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

svg text {
  font-family: "Russo One", sans-serif;
  text-transform: uppercase;
  font-size: 5em;
  pointer-events: none;
}

svg rect {
  transition: 2s;
  transition-delay: 1s;
  fill: white;
}

#horizontal {
  transform: translateX(-100px);
}

#vertical {
  transform: translate(335px, 150px);
}

#horizontal._activate {
  animation: attack 0.4s 1;
}

#vertical._activate {
  animation: attack-2 0.4s 1;
  animation-delay: 0.4s;
}

#top._activate-rect {
	transform: translate(-20px, -20px);
	opacity: 0;
}

#bottom._activate-rect {
	transform: translate(-20px, 20px);
	opacity: 0;
}

#topN._activate-rect {
	transform: translate(20px, -20px);
	opacity: 0;
}

#bottomN._activate-rect {
	transform: translate(20px, 20px);
	opacity: 0;
}

@keyframes attack {
  to {
    transform: translateX(750px);
  }
}

@keyframes attack-2 {
  to {
    transform: translateX(335px) translateY(-150px);
  }
}

@keyframes break {
  to {
    transform: translateX(320px);
  }
}
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<svg viewBox="0 0 740 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <!-- FIRST SIDE -->
    <clipPath id="clip">
      <text text-anchor="middle" x="368" y="50%">Breaking text</text>
    </clipPath>
    <!-- SECOND SIDE -->
    <clipPath id="clipN">
      <text text-anchor="middle" x="370" y="50%">Breaking text</text>
    </clipPath>
  </defs>
  <!-- FOUR RECTS -->
  <g onclick="doubleCrack()">
    <rect id="top" clip-path="url(#clip)" width="336" height="50" y="26"/>
    <rect id="bottom" clip-path="url(#clip)" width="336" height="50" y="75"/>
    <rect id="topN" clip-path="url(#clipN)" width="380" height="50" x="335" y="26"/>
    <rect id="bottomN" clip-path="url(#clipN)" width="380" height="50" x="335" y="75"/>
  </g>
  <!-- SWORDS -->
  <g>		
    <polygon id="horizontal" points="0,75 55,67 70,75 56,80" fill="silver"/>
    <polygon id="vertical" points="0,60 5,68 0,100 -5,68" fill="silver"/>
  </g>
</svg>

    • 12

相关问题