Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS3 Animationseffekte zu Text hinzufügen (mit Code).

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS Flammeneffekte zu Text hinzufügen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit CSS Flammeneffekte zu Text hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS3 Animationseffekte zum Text hinzufügen. Sehen wir uns an, wie das gemeinsam geht.

Auf dieser Art von Website können Sie sehen, dass sich sowohl Text als auch Bilder mit der angegebenen Zeit ändern. Das Prinzip des leistungsstarken Primärschlüssels von CSS3 ist sehr einfach. Er verwendet hauptsächlich das Animationsattribut in CSS, um den Animationseffekt von Text für jedermann sichtbar zu machen.

Codeschritte

1. Verwenden Sie zuerst das html-Framework. html框架。

创建新一个文档，写代码先用<div class="animate box">这串代码。<pre class="brush:php;toolbar:false">&lt;div class=&quot;animate box&quot;&gt;&lt;/div&gt;</pre><p style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;text-indent:0;padding:0 0 0 0 ;background:rgb(255,255,255)">2、目前大体的框架已经写好，<code><div>标签。接下来向其中添加文字代码。将代码放在<code><span></span>中，文本中随意写什么都可以，我写了是“css3实现简单的文字动画效果”

<div class="animate box">
<span>css3实现简单的文字动画效果</span>
</div>

ok,html代码大功告成

3、css3实现最核心的部分：CSS设置动画及字体样式。

animate属性使用将动画与div元素绑定，以像素计。当为元素定义animate属性时，其子元素会获得透视效果，而不是元素本身。下面给大家怎么写代码，首先在head标签之间加入<style type="text/css"><style></style>这串代码然后在style标签中输入文本的字体大小、外边距、布局（设置元素上宽度和高度）代码示例。

.animate {
  font-size: 40px;
  margin: 100px 0 0;
}
 
.animate span {
  display: inline-block;
}

4、box盒子

box盒子模型指是：在网页上直观地布局元素，每个框都有一个内容区域以及可选的周围边距，边距和边框。下面给大家怎么写代码，以上head标签之间加入<style type="text/css"><style></style>串代码的方法一样，style标签中输入文本的颜色、不透明、偏移，代码示例。

.box span {
  color: #fff;
  opacity: 0;
  transform: translate(-150px, 0) scale(.5);
  animation: leftRight 1s forwards;
}

5、把盒子animation添加@keyframes ，因为这是divErstellen Sie ein neues Dokument und schreiben Sie zuerst den Code mit <div class="animate box">. <pre class="brush:php;toolbar:false">@keyframes leftRight { 40% { transform: translate(30px, 0) scale(.7); opacity: 1; color: #000; } 60% { color: #fff; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; }</pre><p>2. Derzeit ist das allgemeine Framework geschrieben, <code><div>-Tag. Fügen Sie als Nächstes Textcode hinzu. Fügen Sie den Code in <code><span></span> ein. Sie können in den Text schreiben, was Sie möchten. Ich habe „css3, um einen einfachen Textanimationseffekt zu erzielen“ geschrieben . Der Kernbestandteil der CSS3-Implementierung: CSS-Animation und Schriftstile. Das Attribut animate wird verwendet, um die Animation an das Element div zu binden, gemessen in Pixeln. Wenn Sie das Attribut animate für ein Element definieren, erhalten seine untergeordneten Elemente den Perspektiveffekt, nicht das Element selbst. Lassen Sie mich Ihnen zeigen, wie Sie Code schreiben. Fügen Sie zunächst die Codezeichenfolge <style type="text/css"><style></style> zwischen den Tags head hinzu und dann style. rrreee

4. Box-Box

Das Box-Box-Modell bezieht sich auf: intuitives Anordnen von Elementen auf einer Webseite. Jede Box verfügt über einen Inhaltsbereich und optionale umgebende Ränder, Ränder und Ränder. Lassen Sie mich Ihnen unten zeigen, wie Sie den Code schreiben. Die Methode zum Hinzufügen von <style type="text/css"><style></style> zwischen den oben genannten Head-Tags ist die gleiche wie bei Stil Farbe, Deckkraft, Versatz des Eingabetextes im Etikett, Codebeispiel.

rrreee

5. Fügen Sie @keyframes zum Feld animation hinzu, da es sich um ein div-Element handelt, das sich mit konstanter Geschwindigkeit bewegt, Codebeispiel .

rrreee🎜🎜🎜🎜🎜OK, CSS ist fertig🎜🎜【Ende】🎜🎜Empfohlenes Lernen: 🎜CSS3-Video-Tutorial🎜🎜