2020年新年大赛！

Question

Сергей Плотницкий

Asked:2020-10-09 17:11:23 +0000 UTC2020-10-09 17:11:23 +0000 UTC 2020-10-09 17:11:23 +0000 UTC

CSS 打字动画

772

我发现这个选项用于创建打字动画，但由于某种原因，它只适用于文本段落。
尝试对做同样的span事情，没有任何效果。

是什么原因？如何做同样的事情，只有span?

 .css-typing
 {
  width: 30em;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
 }

 @keyframes type{
 from { width: 0; }
 }
@-webkit-keyframes type{
from { width: 0; }
  }

 <p class="css-typing">This is a paragraph that is being typed by CSS animation.</p>

3 个回答

Voted

Dmitrii Sedov · Answer 1 · 2020-10-09T17:17:46Z

Best Answer

Dmitrii Sedov

2020-10-09T17:17:46Z2020-10-09T17:17:46Z

因为标签span有一个属性display: inline并且在内联块中，所以包装不起作用！如果它对您很重要，请span添加到css-typing display: inline-block. 下面的代码

.css-typing {
  width: 30em;
  display: inline-block;
  /*правка*/
  -webkit-animation: type 5s steps(50, end);
  animation: type 5s steps(50, end);
}

@keyframes type {
  from {
    width: 0;
  }
}

@-webkit-keyframes type {
  from {
    width: 0;
  }
}

<span class="css-typing">This is a paragraph that is being typed by CSS animation.</span>

7

meine · Answer 2 · 2020-10-09T17:33:44Z

好吧，只是，它可能会派上用场）

您可以添加一个范围从 100 到 400（例如）的随机计时器，以创建人类打字的错觉

class Writer {
  constructor(node) {
    this.node = node;
    
    if (!this.node) return;

    this.timer = 200; // .2s
    this.broken = this.node.textContent.split('');

    this._init();
  }

  _init() {
    this.node.textContent = '';
    let i = 0;

    let interval = setInterval(() => {
      this.node.textContent += this.broken[i];

      i++;

      if (i >= this.broken.length) clearInterval(interval);
    }, this.timer);
  }
}

const root = document.querySelector('.text');

new Writer(root);

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

body {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
}

.text {
  position: relative;
  width: max-content;
}

.text::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background: #333;
  display: block;
  animation: blinking 1s infinite;
}

@keyframes blinking {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<div class="text">Lorem ipsum dolor sit.</div>

Alexandr_TT · Answer 3 · 2020-10-09T18:56:57Z

svg 解决方案

有更多的文本动画选项。

这是一个更简单的选项，当文本键入动画是通过沿增长的字母移动来实现时path

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body{
  margin:0;
  width:100%; 
  height:100vh;
  overflow:hidden;
  background:hsla(0, 5%, 5%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: -webkit-linear-gradient(left bottom, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
}
svg{
  width:100%;
}

<svg width="100%" height="100%" viewBox="100 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!--  Трасса и анимация движения букв от нуля до 1100px -->
 <path id="path">
		<animate attributeName="d" values="m0,110 h0;m0,110 h1150;m0,110 h1150" dur="8s" begin="0s" repeatCount="indefinite"/>
	</path>
	<text font-size="48" font-family="Montserrat" fill='hsla(36, 95%, 85%, 1)'>
		<textPath xlink:href="#path">This is a paragraph that is being typed by SVG.
    </textPath>
	</text>
</svg>

2. 方括号内文本水平输入的一种变体

括号被添加到文本动画的水平线上，其作用由标记扮演

<marker id="Marker_left" markerWidth="15" markerHeight="50" refX="20"  refY="40">
 <path d="M15,0 0,0 0,50 15,50" fill="none" stroke="#FDE0B4" stroke-width="5" />
</marker> 
   <marker id="Marker_right" markerWidth="15" markerHeight="50" refX="5"  refY="40">
 <path d="M0,0 15,0 15,50 0,50" fill="none" stroke="#FDE0B4" stroke-width="5" />
</marker>

程序代码中给出了进一步的解释。

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body{
  margin:0;
  width:100%; 
  height:100vh;
  overflow:hidden;
  background:hsla(0, 5%, 5%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: -webkit-linear-gradient(left bottom, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
}
svg{
  width:100%;
}

<svg width="100%" height="100%" viewBox="200 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>  
  <!--  Трасса  движения букв от нуля до 1150px -->
 <path id="path" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)">
		<animate attributeName="d" values="m0,110 h0;m0,110 h1150;m0,110 h1150;m0,110 h0" dur="10s" begin="0s" repeatCount="indefinite"/>
	</path>
<marker id="Marker_left" markerWidth="15" markerHeight="50" refX="20"  refY="40">
 <path d="M15,0 0,0 0,50 15,50" fill="none" stroke="#FDE0B4" stroke-width="5" />
</marker> 
   <marker id="Marker_right" markerWidth="15" markerHeight="50" refX="5"  refY="40">
 <path d="M0,0 15,0 15,50 0,50" fill="none" stroke="#FDE0B4" stroke-width="5" />
</marker>
</defs>
<!--   анимация движения букв от нуля до 1150px -->
 
	<text font-size="48" font-family="Montserrat" fill='hsla(36, 95%, 85%, 1)'>
		<textPath xlink:href="#path">This is a paragraph that is being typed by SVG.
    </textPath>
	</text> 
	 <!--  Анимация правой квадратной скобки -->
	 <path id="path" transform="translate(0 0)" d="m0,110 h0" stroke="none" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)">
		<animate attributeName="d" values="m0,110 h0;m0,110 h1150;m0,110 h1150;m0,110 h0" dur="10s" begin="0s" repeatCount="indefinite"/> 
	</path> 
</svg>

3.竖排文字动画

字母沿垂直线动画

<path id="path" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)">
        <animate attributeName="d" values="m0,0 0,10;m0,0 0,500" dur="5s" begin="0s" repeatCount="indefinite"/>
    </path>

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body{
  margin:0;
  width:100%; 
  height:100vh;
  overflow:hidden;
  background:hsla(0, 5%, 5%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: -webkit-linear-gradient(left bottom, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
}
svg{
  width:100%;
}

<svg width="100%" height="100%" viewBox="0 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs> 
   <!--  Трасса вертикального движения букв от нуля до 400px -->
 <path id="path" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)">
		<animate attributeName="d" values="m0,0 0,10;m0,0 0,500" dur="5s" begin="0s" repeatCount="indefinite"/>
	</path>

</defs>
<!--   анимация движения букв от нуля до 400px -->
 
	<text font-size="32" font-family="Montserrat" fill='hsla(36, 95%, 85%, 1)'>
		<textPath xlink:href="#path">This is a paragraph that is being typed by SVG.
    </textPath>
	</text> 
	
</svg>

4. 字母围绕六边形的移动

.container {
width:50%;
height:50%;
}

<div class="container">
<svg 	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 400 450">
<defs>
 <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
      <stop stop-color="#406666" offset="0%"/>
      <stop stop-color="#fcfcfc" offset="50%"/>
      <stop stop-color="#507676" offset="100%"/>
      <animate attributeName="x2" begin="start.click" dur="10s" values="0;0.25;0.5;0.75;1" repeatCount="1"/>
    </linearGradient>
<path id="path1" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
                    200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="none"/>
   </defs>
<rect x='0' y='0' width='400' height='450' fill='#DDDDDD' stroke='black'/>
  <!-- Внутренний шестиугольник-->
<polygon id="pol1" fill="url(#grad1)" stroke="#507676" stroke-width="1" 
            points="200,75  308,137.5 308,262.5
                    200,325 92,262.5 92,137.5" />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="700" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1">
<tspan dy="-10"> Весь  длинный текст  вокруг шестиугольника</tspan>
   <!-- Анимация букв-->
<animate begin="start.click" dur="10s" repeatCount="1" attributeName="startOffset" values="4%;54%"/> 
</textPath>
</text> 

  <!-- Кнопка Старт-->
<g id="start" transform="translate(-270 -370)">
<rect  x="285" y="387" rx="10" width="90" height="35" style="fill:#507676;"/>
<text x='300' y='412' fill="white" font-size="25">Старт</text> 
</g>
     <!-- Внешний шестиугольник-->
  <path id="path2" transform="scale(1.25) translate(-40 -40)" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
                    200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="#507676" stroke-width="1" stroke-opacity="1"/> 
</svg>
</div>

CSS 打字动画

svg 解决方案

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

CSS 打字动画

3 个回答

svg 解决方案

相关问题