Gunakan CSS untuk memuatkan kesan animasi teks-tutorial css-php.cn

Gunakan CSS untuk memuatkan kesan animasi teks

王林

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

ke hadapan

952 orang telah melayarinya

使用 CSS 加载文本动画效果

Kini, animasi ialah ciri paling berkuasa dalam apl untuk menarik lebih ramai pengguna, ia meningkatkan minat pengguna untuk menerokai apl tersebut. Dalam aplikasi web, kita boleh mencipta animasi menggunakan HTML dan CSS. Walau bagaimanapun, kita boleh membuat animasi menggunakan JavaScript, tetapi ini akan melambatkan tapak web.

Dalam tutorial ini, kita akan belajar memuatkan animasi teks menggunakan HTML dan CSS. Apabila mendapatkan data daripada API atau memuatkan halaman web, adalah penting untuk menghidupkan teks pemuatan untuk menjadikannya lebih menarik.

Contoh 1

Dalam contoh di bawah, kami telah mencipta elemen div "pemuat" dan div "pemuat-dalaman" di dalamnya. Dalam CSS, kami memberikan div pemuat saiz tetap dan menghidupkannya menggunakan kerangka utama "putar". Kami menetapkan masa animasi kepada 3 saat.

Selain itu, kami menetapkan bingkai kekunci putaran dalam untuk elemen div pemuat-dalam dan kedudukan dalam elemen div pemuat.

Dalam bingkai utama "Putaran" dan "Putaran Dalaman" kami menggerakkan pemuat dari 0 darjah kepada 360 darjah. Pengguna boleh memerhatikan pemuat berputar dalam output, dengan memuatkan teks di tengah.

<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>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami mencipta bar pemuatan. Di sini kami telah mencipta elemen div pemuat dan elemen div bar di dalamnya. Kami telah menetapkan saiz elemen div loader dan animasi elemen bar dalam CSS.

Kami menggunakan bingkai kekunci "bar-animasi" untuk menganimasikan. Dalam "bar-animasi" kami menukar lebar elemen div untuk menjadikannya berkelakuan seperti bar pemuatan.

<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>

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami mencipta teks pemuatan lantunan. Di sini kami menambah setiap aksara perkataan Memuatkan ke dalam elemen div yang berasingan. Selepas itu, kami menganimasikan semua watak menggunakan bingkai utama "animasi". Dalam kerangka utama "Animasi", kami menukar kedudukan menegak watak.

Selain itu, kami juga menggunakan kaedah "anak ke-n()" untuk mengakses semua elemen div satu demi satu dan menetapkan kelewatan animasi. Dalam output, pengguna boleh memerhatikan teks pemuatan yang melantun.

<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>

Salin selepas log masuk

Contoh 4

Dalam contoh di bawah, kami telah menambah kesan kabur pada teks pemuatan. Di sini kami menambah setiap aksara perkataan muat dalam elemen "span" yang berasingan. Selepas itu, kami mengakses setiap elemen span satu demi satu menggunakan kaedah CSS 'n-th-child()' untuk menambah animasi. Dalam elemen span, kami menambahkan animasi "teks kabur" dengan jumlah kelewatan animasi tertentu.

Dalam bingkai utama animasi, kami menggunakan penapis kabur pada teks untuk menunjukkan kesan kabur yang sedang berjalan pada teks yang dimuatkan.

<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>

Salin selepas log masuk

Pengguna mempelajari 4 jenis animasi pemuatan yang berbeza dalam tutorial ini. Dalam contoh pertama, kami mencipta penunjuk pemuatan berputar dengan teks. Dalam contoh kedua, kami mencipta bar pemuatan. Selain itu, dalam contoh ketiga, kami mencipta teks pemuatan lantunan, dan dalam contoh terakhir, kami menambah kesan kabur pada teks.

Atas ialah kandungan terperinci Gunakan CSS untuk memuatkan kesan animasi teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!