Verwenden Sie CSS, um Textanimationseffekte zu laden-CSS-Tutorial-php.cn

Verwenden Sie CSS, um Textanimationseffekte zu laden

王林

Freigeben： 2023-08-30 11:21:07

nach vorne

942 Leute haben es durchsucht

使用 CSS 加载文本动画效果

Heutzutage ist Animation die leistungsstärkste Funktion in einer App, um mehr Benutzer anzulocken. Sie erhöht das Interesse der Benutzer, die App zu erkunden. In Webanwendungen können wir Animationen mit HTML und CSS erstellen. Wir können jedoch Animationen mit JavaScript erstellen, dies führt jedoch zu einer Verlangsamung der Website.

In diesem Tutorial lernen wir, Textanimationen mit HTML und CSS zu laden. Beim Abrufen von Daten von einer API oder beim Laden einer Webseite ist es wichtig, den Ladetext zu animieren, um ihn attraktiver zu machen.

Beispiel 1

Im folgenden Beispiel haben wir darin die Div-Elemente „loader“ und „loader-inner“ erstellt. In CSS geben wir dem Loader-Div eine feste Größe und animieren es mithilfe des Keyframes „Rotate“. Wir stellen die Animationszeit auf 3 Sekunden ein.

Zusätzlich haben wir Innenrotations-Keyframes für das Loader-Inner-Div-Element und die Position innerhalb des Loader-Div-Elements festgelegt.

In den Keyframes „Rotation“ und „Interne Rotation“ bewegen wir den Loader von 0 Grad auf 360 Grad. Benutzer können den sich drehenden Lader in der Ausgabe beobachten, mit Ladetext in der Mitte.

<html>
<head>
   <style>
      .loader {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         border: 6px dotted green;
         position: relative;
         animation: rotation 3s linear infinite;
      }
      .loader-inner {
         position: absolute;
         width: 70px;
         height: 70px;
         border-radius: 50%;
         border-block: 6px solid yellow;
         top: 10px;
         left: 10px;
         animation: rotation-inner 3s linear infinite;
      }
      .loader-text {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
      }
      @keyframes rotation {
         from { transform: rotate(0deg);}
         to { transform: rotate(360deg);}
      }
      @keyframes rotation-inner {
         from { transform: rotate(0deg);}
         to {transform: rotate(360deg);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS </i></h2>
   <div class = "loader">
      <div class = "loader-inner"> </div>
      <div class = "loader-text"> Loading </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Im Beispiel unten haben wir eine Ladeleiste erstellt. Hier haben wir ein Loader-Div-Element und ein Bar-Div-Element darin erstellt. Wir haben die Größe des Loader-Div-Elements und die Animation des Bar-Elements in CSS festgelegt.

Wir verwenden „Balkenanimations“-Keyframes zum Animieren. In „bar-animation“ ändern wir die Breite des div-Elements, damit es sich wie ein Ladebalken verhält.

<html>
<head>
   <style>
      .container { width: 200px; }
      .loader {
         width: 200px;
         height: 15px;
         position: relative;
         overflow: hidden;
         border: 2px solid blue;
         border-radius: 5px;
      }
      .bar {
         width: 0%;
         height: 100%;
         background-color: green;
         animation: bar-animation 5s ease-in-out infinite;
      }
      span {
         font-size: 1.3rem;
         display: flex;
         justify-content: center;
         color: green;
      }
      @keyframes bar-animation {
         0% {width: 0%;}
         50% {width: 100%;}
         100% {width: 0%;}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class = "container">
      <div class = "loader">
         <div class = "bar"> </div>
      </div>
      <span> Loading </span>
   </div>
</body>
</html>

Nach dem Login kopieren

Beispiel 3

Im folgenden Beispiel haben wir Bounce-Loading-Text erstellt. Hier fügen wir jedes Zeichen des Loading-Worts in ein separates div-Element ein. Danach animieren wir alle Charaktere mithilfe von „Animations“-Keyframes. Im Animations-Keyframe ändern wir die vertikale Position des Charakters.

Außerdem haben wir die Methode „n-th-child()“ verwendet, um nacheinander auf alle div-Elemente zuzugreifen und die Animationsverzögerung festzulegen. In der Ausgabe kann der Benutzer den springenden Ladetext beobachten.

<html>
<head>
   <style>
      .char {
         font-size: 44px;
         color: blue;
         display: inline-block;
         transition: all 0.9s;
         animation: animate 1.5s infinite;
      }
      .char:nth-child(1) {animation-delay: 0.1s;}
      .char:nth-child(2) {animation-delay: 0.3s;}
      .char:nth-child(3) {animation-delay: 0.4s;}
      .char:nth-child(4) {animation-delay: 0.5s;}
      .char:nth-child(5) {animation-delay: 0.6s;}
      .char:nth-child(6) {animation-delay: 0.8s;}
      .char:nth-child(7) {animation-delay: 0.9s;}
      .char:nth-child(8) {animation-delay: 1s;}
      .char:nth-child(9) {animation-delay: 1.2s;}
      .char:nth-child(10) {animation-delay: 1.4s;}
      @keyframes animate {
         0% {transform: translateY(0);}
         40% {transform: translateY(-20px);}
         100% {transform: translateY(0);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class="allLetters">
      <div class = "char"> L </div>
      <div class = "char"> o </div>
      <div class = "char"> a </div>
      <div class = "char"> d </div>
      <div class = "char"> i </div>
      <div class = "char"> n </div>
      <div class = "char"> g </div>
      <div class = "char"> . </div>
      <div class = "char"> . </div>
      <div class = "char"> . </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Beispiel 4

Im Beispiel unten haben wir dem Ladetext einen Unschärfeeffekt hinzugefügt. Hier fügen wir jedes Zeichen des Ladeworts in einem separaten „span“-Element hinzu. Danach greifen wir nacheinander auf jedes Span-Element zu, indem wir die CSS-Methode „n-th-child()“ verwenden, um eine Animation hinzuzufügen. Im span-Element haben wir eine „unscharfer Text“-Animation mit einer bestimmten Animationsverzögerung hinzugefügt.

In Animations-Keyframes wenden wir einen Unschärfefilter auf den Text an, um einen laufenden Unschärfeeffekt auf dem geladenen Text anzuzeigen.

<html>
<head>
   <style>
      span {font-size: 2rem; color: green;}
      /* adding blur animation effect on each character of loading text one by one */
      span:nth-child(1){animation: blur-text 4s ease-in-out infinite;}
      span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;}
      span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;}
      span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;}
      span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;}
      span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;}
      span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;}
      @keyframes blur-text {
         0% {filter: blur(0px);}
         50% {filter: blur(4px);}
         100% {filter: blur(0px);}
      }
   </style>
</head>
<body>
   <h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
   <div class = "allLetters">
      <span> L </span>
      <span> O </span>
      <span> A </span>
      <span> D </span>
      <span> I </span>
      <span> N </span>
      <span> G </span>
   </div>
</body>
</html>

Nach dem Login kopieren

Benutzer haben in diesem Tutorial 4 verschiedene Arten von Ladeanimationen kennengelernt. Im ersten Beispiel erstellen wir eine rotierende Ladeanzeige mit Text. Im zweiten Beispiel erstellen wir eine Ladeleiste. Darüber hinaus haben wir im dritten Beispiel einen Bounce-Loading-Text erstellt und im letzten Beispiel dem Text einen Unschärfeeffekt hinzugefügt.

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um Textanimationseffekte zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!