主页 / 问题 / 766461
Accepted
Alexandr_TT
Asked:2020-01-04 18:55:21 +0000 UTC2020-01-04 18:55:21 +0000 UTC

形成单词的字母的混乱运动

  • 772

如何实现字母的混乱运动，在终点线上加起来一个单词。

在过程开始时，整个单词都在屏幕上。然后它分解成开始混乱移动的字母，然后这些字母加起来又变成一个单词。
使用 Javascript，这很容易做到——这样的脚本已经存在。

JS是否可以实施与手段相同的原则HTML，CSS或者SVG？

一个决定立刻浮现在脑海。借助工具，HTML您可以将单词分成单个字母：

<span id="s">S</span>
<span id="t">t</span> 
<span id="а">a</span>
<span id="с">с</span>
<span id="k">k</span>

然后使用css-animation，以某种方式为它们设置动画。为了提供真实感，您必须规定每个字母的移动到几个不同的位置。
但这将是代码表。
有没有不使用 Javascript 的更有效的解决方案？

html

5 个回答

  1. Best Answer

    Вариант с переменными — так можно обойтись одним описанием анимации и затем только менять коэффициенты для каждой из букв.

    @keyframes move {
  0% {
    transform: translate(calc(250px / var(--c1)), calc(650px / var(--c1)));
  }
  
  25% {
    transform: translate(calc(-150px / var(--c1)), calc(325px / var(--c1)));
  }
  
  50% {
    transform: translate(calc(185px / var(--c1)), calc(-725px / var(--c1)));
  }
  
  75% {
    transform: translate(calc(410px / var(--c1)), calc(145px / var(--c1)));
  }
  
  100% {
    transform: translate(0, 0);
  }
}

body {
  min-height: 100vh;
  display: flex;
  margin: 0;
  overflow: hidden;
}

div {
  margin: auto;
}

span {
  font-size: 22px;
  position: relative;
  animation: move 5s;
  display: inline-block;
}

.letters__a {
  --c1: 2;
  --c2: 3;
}

.letters__b {
  --c1: -1.5;
  --c2: -0.8;
}

.letters__c {
  --c1: 5;
  --c2: 2;
}

.letters__d {
  --c1: -2.8;
  --c2: -7.3;
}

.letters__e {
  --c1: -4.1;
  --c2: -3.6;
}
    <div class="letters">
  <span class="letters__a">A</span>
  <span class="letters__b">B</span>
  <span class="letters__c">C</span>
  <span class="letters__d">D</span>
  <span class="letters__e">E</span>
</div>

    • 22

  2. CSS 选项

    * {
  box-sizing: border-box;
  margin: 0;
}

body {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

span {
  display: inline-block;
  position: relative;
  font-size: 30px;
}

span:before {
  position: absolute;
  color: #F48024;
}

#s:before {
  content: 'S';
  animation: animLetterS 5s linear forwards;
}

#t:before {
  content: 't';
  animation: animLetterT 5s linear forwards;
}

#a:before {
  content: 'a';
  animation: animLetterA 5s linear forwards;
}

#c:before {
  content: 'c';
  animation: animLetterC 5s linear forwards;
}

#k:before {
  content: 'k';
  animation: animLetterK 5s linear forwards;
}

@keyframes animLetterS {
  0% {
    transform: translateY(-50px) translateX(-50px) rotate(35deg);
  }
  20% {
    transform: translateY(-100px) translateX(50px) rotate(15deg);
  }
  40% {
    transform: translateY(50px) translateX(-50px) rotate(-15deg);
  }
  60% {
    transform: translateY(100px) translateX(50px) rotate(-155deg);
  }
  80% {
    transform: translateY(-50px) translateX(150px) rotate(55deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes animLetterT {
  0% {
    transform: translateY(-100px) translateX(50px) rotate(15deg);
  }
  20% {
    transform: translateY(-50px) translateX(-50px) rotate(35deg);
  }
  40% {
    transform: translateY(-50px) translateX(150px) rotate(55deg);
  }
  60% {
    transform: translateY(10px) translateX(50px) rotate(-1deg);
  }
  80% {
    transform: translateY(50px) translateX(-50px) rotate(-15deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes animLetterA {
  0% {
    transform: translateY(50px) translateX(-50px) rotate(-15deg);
  }
  20% {
    transform: translateY(10px) translateX(50px) rotate(-1deg);
  }
  40% {
    transform: translateY(-150px) translateX(150px) rotate(55deg);
  }
  60% {
    transform: translateY(-50px) translateX(-50px) rotate(95deg);
  }
  80% {
    transform: translateY(-100px) translateX(50px) rotate(15deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes animLetterC {
  0% {
    transform: translateY(-50px) translateX(-50px) rotate(15deg);
  }
  20% {
    transform: translateY(100px) translateX(0px) rotate(-100deg);
  }
  40% {
    transform: translateY(-15px) translateX(200px) rotate(135deg);
  }
  60% {
    transform: translateY(-50px) translateX(-150px) rotate(95deg);
  }
  80% {
    transform: translateY(100px) translateX(-69px) rotate(15deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes animLetterK {
  0% {
    transform: translateY(250px) translateX(150px) rotate(45deg);
  }
  20% {
    transform: translateY(-150px) translateX(-150px) rotate(-45deg);
  }
  40% {
    transform: translateY(-50px) translateX(50px) rotate(90deg);
  }
  60% {
    transform: translateY(150px) translateX(-150px) rotate(-90deg);
  }
  80% {
    transform: translateY(30px) translateX(-30px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
    <span id="s">S</span>
<span id="t">t</span>
<span id="a">a</span>
<span id="c">с</span>
<span id="k">k</span>

    • 19

  3. SVG 解决方案

    svg 有一个 HTML 的类似物<span>， -<tspan dx="x" dy="y">S</tspan>它更实用，但如果你按照问题中提出的解决方案，那么也会有很多代码。

    有一个更有效的解决方案，但要理解它，您可能需要从简单到复杂。

    整字运动动画

    用于在屏幕上显示单词的 SVG 命令：

    <text x="100" y="500" font-size="90">Stackoverflow<text>

    其中x和y是单词第一个字符的坐标。

    要动画单词的移动，您需要以某种方式动态更改或读取这些坐标。但是 SVG 中没有变量，尤其是数组，如JS

    但是有机会在一个团队中组织他们的相似之处<animate> 

    <animate xlink:href="#text1" 
    attributeName="x" 
    attributeType="XML"
        values="200;
    100; 
    200;
    332;
    464;
    332;
    200"
    dur="4.0s"
    begin="0s"
    repeatCount="2" />

    用分号分隔的数字表示沿轴的几个位置Х，它们将依次占据单词。

    为坐标编写了类似的命令Y。

    下面是移动整个单词的完整代码： 

    <style>
 #text1 {

fill:#642B82;
}
</style>
<svg width="500px" height="500px" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="steelblue" />
        <stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
        <stop offset="45%" stop-color="hsla(80, 100%, 77%, 0)" />
        <stop offset="100%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
	
 
<text  x="200 " y="500" 
font-size="80" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text> 
<text id="text1" x="200" y="500"
font-size="80">Stackoverflow</text> 

<animate xlink:href="#text1" 
	attributeName="x" 
	attributeType="XML"
  values="200;
	100; 
	200;
	332;
	464;
	332;
    200"
	dur="4.0s"
	begin="0s"
	repeatCount="2" />
<animate xlink:href="#text1"
	attributeName="y" 
	attributeType="XML"
  values="500;
	100; 
	100;
	500; 
	800;
	800;
	500"
	dur="3.5s"
	begin="0s"
	repeatCount="2" />


</svg>

    将单词分解为单个字母

    SVG为此提供了一个非常强大的工具。它隐藏在 command<animate>
    中，因为每个字符都是一个向量对象，它有自己的坐标，使用它可以将单词分解为单个字母。如果我们继续类比JS，那么它就像一个二维数组，其中每一列是字符的这一列对应的移动的可变值。 

             S   t   a   c   k   o   v   e   r   f   l   o   w

    1поз. |200 233 266 299 332 365 400 431 464 497 530 563 596; 2поз. |100 600 200 365 700 465 465 563 530 398 431 850 900; 3поз. |200 500 900 950 150 531 300 620 150 266 365 650 900; 4поз. |332 233 820 300 800 633 200 670 300 850 800 530 266; 5поз. |464 900 900 900 820 670 430 900 530 600 233 365 100; 6поз. |332 100 100 100 500 100 800 563 900 700 900 100 100; 7поз. |200 233 266 299 332 365 400 431 464 497 530 563 596

    换句话说：第一列第一行是x=200移动的第一个位置的坐标，单词的第一个字符是“S”然后字符"S"移动到第二个位置x=100，以此类推。在返回到поз.7
    第二列中第二个字符“t”的原始位置之前，从第一个位置开始移动，x="233"到第二个位置x="600"
    动画期间，读取第一行，所有字符按照坐标排列为他们指定。

    接下来，读取第二行，彼此独立的字符取而代之。每行必须用分号与另一行隔开。最后一行没有分号。

    以此类推，编译一模一样的表来设置坐标Y。

    这两个命令<animate>旨在更改坐标X并Y同时开始工作，从而确保每个字母在运动的每个位置同时更改坐标。

    下面是模仿字母混乱运动的动画代码： 

    <style>
 #text1 {

fill:#B2000C;
}
 
</style>
<svg width="50%" height="50%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
 
	<title>Animation of text x and y attributes</title> 
	

<defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="steelblue" />
        <stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
        <stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
        <stop offset="95%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text> 
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text> 

<animate xlink:href="#text1" 
	attributeName="x" 
	attributeType="XML"
        values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
  200	233 266 299 332 365 400 431 464 497 530 563 596"
	dur="4s"
	begin="0s"
	repeatCount="2" />
<animate xlink:href="#text1"
	attributeName="y" 
	attributeType="XML"
        values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"
	dur="4s"
	begin="0s"
	repeatCount="2" />


</svg>

    事实证明，对于这种类型的动画来说，它是一个非常强大的工具。你可以玩转它，改变速度，开始时间，添加事件让动画交互，改变动画的持续时间，可以达到字母“水平”和“垂直停放”的效果。动画。
    您可以用另一个替换动画文本。如果它比原来的短，它的工作原理完全一样。如果超过 13 个字符，则多余的字符将粘在第 13 个字符上，并与它一起移动。

    以下是示例：

    水平停车字母

    效果是通过两个动画的执行时间不同来实现的。水平动画 1 秒。持续更久。 

    <style>
 #text1 {

fill:#B2000C;
}
 
</style>
<svg width="50%" height="50%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
 
	<title>Animation of text x and y attributes</title> 
	

<defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="steelblue" />
        <stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
        <stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
        <stop offset="95%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text> 
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text> 

<animate xlink:href="#text1" 
	  attributeName="x" 
	  attributeType="XML"
    values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
    200	233 266 299 332 365 400 431 464 497 530 563 596"
	dur="4s"
	begin="0s"
	repeatCount="2" />
<animate xlink:href="#text1"
	  attributeName="y" 
	  attributeType="XML"
    values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"
    	dur="3s"
	  begin="0s"
    	repeatCount="2" />


</svg>

    垂直停车字母 

    <style>
 #text1 {

fill:#B2000C;
}
 
</style>
<svg width="70%" height="70%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
 
	<title>Animation of text x and y attributes</title> 
	

<defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="steelblue" />
        <stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
        <stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
        <stop offset="95%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text> 
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text> 

<animate xlink:href="#text1" 
	attributeName="x" 
	attributeType="XML"
        values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
    200	233 266 299 332 365 400 431 464 497 530 563 596"
	dur="3s"
	begin="0s"
	repeatCount="2" />
<animate xlink:href="#text1"
	attributeName="y" 
	attributeType="XML"
        values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"
	dur="4s"
	begin="0s"
	repeatCount="2" />


</svg>

    我们替换其他字母： 

    <style>
 #text1 {

fill:#642B82;
}
 
</style>
<svg width="70%" height="70%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
 
	<title>Animation of text x and y attributes</title> 
	

<defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="steelblue" />
        <stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
        <stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
        <stop offset="95%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Svg-art.ru</text> 
<text id="text1" x="200" y="500"
font-size="90">Svg-art.ru</text> 

<animate xlink:href="#text1" 
	attributeName="x" 
	attributeType="XML"
        values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
    200	233 266 299 332 365 400 431 464 497 530 563 596"
	dur="3s"
	begin="0s"
	repeatCount="2" />
<animate xlink:href="#text1"
	attributeName="y" 
	attributeType="XML"
        values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"
	dur="4s"
	begin="0s"
	repeatCount="2" />


</svg>

    • 16

  4. Пример с использованием GSAP и псевдо-рандомайзом. Все параметры, начиная от скорости каждого шага и до временной функции настраиваемые, очень удобная штука.

    var master = new TimelineMax(),
  boxWidth = $('body').outerWidth(),
  boxHeight = $('body').outerHeight(),
  duration = 3;

master.add(step1())
  .add(step2())
  .add(step3());

function step1() {
  var letters = new TimelineMax(),
    letter = $('span'),
    minX = -$('div').offset().left,
    minY = -$('div').offset().top,
    maxX = boxWidth - $('div').offset().left,
    maxY = boxHeight - $('div').offset().top;

  letter.each(function(index, $item) {
    TweenLite.set($item, {
      left: Math.random() * (maxX - minX) + minX,
      top: Math.random() * (maxY - minY) + minY
    });

    letters.to($item, duration, {
      left: Math.random() * (maxX - minX) + minX,
      top: Math.random() * (maxY - minY) + minY,
      ease: Linear.easeNone
    }, 0);
  });

  return letters;
}

function step2() {
  var letters = new TimelineMax(),
    letter = $('span'),
    minX = -$('div').offset().left,
    minY = -$('div').offset().top,
    maxX = boxWidth - $('div').offset().left,
    maxY = boxHeight - $('div').offset().top;

  letter.each(function(index, $item) {
    letters.to($item, duration, {
      left: Math.random() * (maxX - minX) + minX,
      top: Math.random() * (maxX - minX) + minX,
      ease: Linear.easeNone
    }, 0);
  });

  return letters;
}

function step3() {
  var letters = new TimelineMax(),
    letter = $('span');

  letter.each(function(index, $item) {
    letters.to($item, duration, {
      left: 0,
      top: 0,
      ease: Linear.easeNone
    }, 0);
  });

  return letters;
}
    body {
  min-height: 100vh;
  display: flex;
  margin: 0;
  overflow: hidden;
}

div {
  margin: auto;
}

span {
  font-size: 22px;
  position: relative;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
</div>

    • 13

  5. Вариант с использованием препроцессора SCSS

    SCSS - 85 строк кода

    /* ----- variables ----- */
$font-family: 'Segoe UI', Arial, sans-serif;
$fw700: 700;
$color-default: #ccc;
$letter-size: 13vh;
$letter-count: 13;
$full-height: 100vh;
$colors: #fd6347, #008080, #6a5acd, #2e8b57, #ff4500, #32cd32, #f48024;

$letters: S, t, a, c, k, o, v, e, r, f, l, o, w;

/* ----- mixin ----- */
@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model;
  box-sizing: $box-model;
}
@mixin centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin reset {
  margin: 0;
  padding: 0;
}
*,
*:after,
*:before {
  @include box-sizing(border-box);
}
* {
  @include reset;
}

body {
  height: $full-height;
  @include centered;
  overflow: hidden;
  font-family: $font-family;
}

.letter {
  display: inline-block;
  position: relative;
  color: $color-default;
  font-size: $letter-size;
}

@for $i from 1 through $letter-count {
  $rotation: random(360);
  $colors-random: nth($colors, random(length($colors)));

  @keyframes animLetter-#{$i} {
    0% {
      transform: translate(random(200) - 100 + px, random(200) - 100 + px)
        rotate(#{$rotation}deg);
    }
    20% {
      transform: translate(random(200) - 100 + px, random(200) - 100 + px) rotate(#{$rotation}deg);
    }
    40% {
      transform: translate(random(200) - 100 + px, random(200) - 100 + px) rotate(#{$rotation}deg);
    }
    60% {
      transform: translate(random(200) - 100 + px, random(200) - 100 + px) rotate(#{$rotation}deg);
    }
    80% {
      transform: translate(random(200) - 100 + px, random(200) - 100 + px) rotate(#{$rotation}deg);
    }
    100% {
      transform: translate(0) rotate(0);
      color: #f48024;
    }
  }
  .letter {
    &:nth-child(n + 6){
      font-weight: $fw700;
    }
    &:nth-child(#{$i}):before {
      content: "#{nth($letters, $i)}";
      position: absolute;
      color: $colors-random;
      animation-name: animLetter-#{$i};
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }
  }
}

    CSS - 430 строк

    1. Рандомно изменяется position transform translate
    2. Рандомно изменяется position transform rotate
    3. Рандомно изменяется color letters

    Codepen

    Скомпилированный вариант на css (т.к здесь нет поддержки scss)

    *,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.letter {
  display: inline-block;
  position: relative;
  font-size: 30px;
}

@keyframes animLetter-1 {
  0% {
    transform: translate(67px, -41px) rotate(303deg);
  }
  20% {
    transform: translate(-80px, -88px) rotate(303deg);
  }
  40% {
    transform: translate(-79px, 76px) rotate(303deg);
  }
  60% {
    transform: translate(-28px, -2px) rotate(303deg);
  }
  80% {
    transform: translate(34px, -17px) rotate(303deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(1):before {
  content: "S";
  position: absolute;
  color: #FF4500;
  animation-name: animLetter-1;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-2 {
  0% {
    transform: translate(-94px, 94px) rotate(272deg);
  }
  20% {
    transform: translate(-18px, -14px) rotate(272deg);
  }
  40% {
    transform: translate(-32px, -6px) rotate(272deg);
  }
  60% {
    transform: translate(86px, 38px) rotate(272deg);
  }
  80% {
    transform: translate(-19px, -88px) rotate(272deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(2):before {
  content: "t";
  position: absolute;
  color: #008080;
  animation-name: animLetter-2;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-3 {
  0% {
    transform: translate(77px, 93px) rotate(140deg);
  }
  20% {
    transform: translate(-56px, -45px) rotate(140deg);
  }
  40% {
    transform: translate(66px, -8px) rotate(140deg);
  }
  60% {
    transform: translate(-89px, -26px) rotate(140deg);
  }
  80% {
    transform: translate(96px, 31px) rotate(140deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(3):before {
  content: "a";
  position: absolute;
  color: #32CD32;
  animation-name: animLetter-3;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-4 {
  0% {
    transform: translate(-54px, 32px) rotate(316deg);
  }
  20% {
    transform: translate(-15px, -53px) rotate(316deg);
  }
  40% {
    transform: translate(56px, -34px) rotate(316deg);
  }
  60% {
    transform: translate(-21px, 6px) rotate(316deg);
  }
  80% {
    transform: translate(55px, 3px) rotate(316deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(4):before {
  content: "c";
  position: absolute;
  color: #008080;
  animation-name: animLetter-4;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-5 {
  0% {
    transform: translate(82px, 81px) rotate(224deg);
  }
  20% {
    transform: translate(-44px, -43px) rotate(224deg);
  }
  40% {
    transform: translate(-82px, 30px) rotate(224deg);
  }
  60% {
    transform: translate(90px, 98px) rotate(224deg);
  }
  80% {
    transform: translate(30px, 27px) rotate(224deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(5):before {
  content: "k";
  position: absolute;
  color: #008080;
  animation-name: animLetter-5;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-6 {
  0% {
    transform: translate(-44px, 35px) rotate(109deg);
  }
  20% {
    transform: translate(51px, -76px) rotate(109deg);
  }
  40% {
    transform: translate(14px, 71px) rotate(109deg);
  }
  60% {
    transform: translate(19px, 16px) rotate(109deg);
  }
  80% {
    transform: translate(97px, 52px) rotate(109deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(6):before {
  content: "o";
  position: absolute;
  color: #008080;
  animation-name: animLetter-6;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-7 {
  0% {
    transform: translate(37px, 28px) rotate(146deg);
  }
  20% {
    transform: translate(-72px, -70px) rotate(146deg);
  }
  40% {
    transform: translate(66px, 29px) rotate(146deg);
  }
  60% {
    transform: translate(-9px, 42px) rotate(146deg);
  }
  80% {
    transform: translate(-25px, -6px) rotate(146deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(7):before {
  content: "v";
  position: absolute;
  color: #008080;
  animation-name: animLetter-7;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-8 {
  0% {
    transform: translate(22px, -10px) rotate(203deg);
  }
  20% {
    transform: translate(-94px, -60px) rotate(203deg);
  }
  40% {
    transform: translate(7px, -12px) rotate(203deg);
  }
  60% {
    transform: translate(98px, 95px) rotate(203deg);
  }
  80% {
    transform: translate(58px, 99px) rotate(203deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(8):before {
  content: "e";
  position: absolute;
  color: #FF4500;
  animation-name: animLetter-8;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-9 {
  0% {
    transform: translate(67px, 51px) rotate(303deg);
  }
  20% {
    transform: translate(-21px, 30px) rotate(303deg);
  }
  40% {
    transform: translate(-52px, -29px) rotate(303deg);
  }
  60% {
    transform: translate(-32px, -53px) rotate(303deg);
  }
  80% {
    transform: translate(-43px, -90px) rotate(303deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(9):before {
  content: "r";
  position: absolute;
  color: #6A5ACD;
  animation-name: animLetter-9;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-10 {
  0% {
    transform: translate(30px, -96px) rotate(344deg);
  }
  20% {
    transform: translate(31px, 60px) rotate(344deg);
  }
  40% {
    transform: translate(10px, 5px) rotate(344deg);
  }
  60% {
    transform: translate(-34px, 32px) rotate(344deg);
  }
  80% {
    transform: translate(-81px, 43px) rotate(344deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(10):before {
  content: "f";
  position: absolute;
  color: #008080;
  animation-name: animLetter-10;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-11 {
  0% {
    transform: translate(52px, 32px) rotate(320deg);
  }
  20% {
    transform: translate(59px, -45px) rotate(320deg);
  }
  40% {
    transform: translate(-92px, 52px) rotate(320deg);
  }
  60% {
    transform: translate(72px, -88px) rotate(320deg);
  }
  80% {
    transform: translate(-24px, -94px) rotate(320deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(11):before {
  content: "l";
  position: absolute;
  color: #FF4500;
  animation-name: animLetter-11;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-12 {
  0% {
    transform: translate(35px, -70px) rotate(359deg);
  }
  20% {
    transform: translate(83px, -53px) rotate(359deg);
  }
  40% {
    transform: translate(-59px, 34px) rotate(359deg);
  }
  60% {
    transform: translate(-9px, -34px) rotate(359deg);
  }
  80% {
    transform: translate(-5px, -6px) rotate(359deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(12):before {
  content: "o";
  position: absolute;
  color: #FD6347;
  animation-name: animLetter-12;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animLetter-13 {
  0% {
    transform: translate(19px, 94px) rotate(200deg);
  }
  20% {
    transform: translate(-57px, 99px) rotate(200deg);
  }
  40% {
    transform: translate(67px, 64px) rotate(200deg);
  }
  60% {
    transform: translate(-20px, -25px) rotate(200deg);
  }
  80% {
    transform: translate(93px, -8px) rotate(200deg);
  }
  100% {
    transform: translate(0) rotate(0);
    color: #F48024;
  }
}
.letter:nth-child(13):before {
  content: "w";
  position: absolute;
  color: #2E8B57;
  animation-name: animLetter-13;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
    <div class="letters">
  <span class="letter">S</span>
  <span class="letter">t</span>
  <span class="letter">a</span>
  <span class="letter">с</span>
  <span class="letter">k</span>
  <span class="letter">o</span>
  <span class="letter">v</span>
  <span class="letter">e</span>
  <span class="letter">r</span>
  <span class="letter">f</span>
  <span class="letter">l</span>
  <span class="letter">o</span>
  <span class="letter">w</span>
</div>

    • 8

相关问题