Ajar anda langkah demi langkah cara menggunakan css3 untuk menambah kesan animasi pada teks (dengan kod)

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan css untuk menambah kesan nyalaan pada teks (penjelasan kod terperinci) ", saya memperkenalkan anda cara menggunakan css untuk menambah kesan nyalaan kepada teks. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css3 untuk menambah kesan animasi pada teks Mari lihat cara melakukannya bersama-sama.

Anda boleh melihat dalam jenis tapak web ini bahawa kedua-dua teks dan gambar berubah mengikut masa yang ditetapkan. Prinsip kunci utama CSS3 yang berkuasa adalah sangat mudah Ia menggunakan atribut animasi dalam CSS untuk merealisasikan kesan animasi teks untuk dilihat oleh semua orang.

Langkah kod

1. Mula-mula gunakan rangka kerja html.

Buat dokumen baharu dan tulis kod menggunakan <div class="animate box"> rentetan kod dahulu. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;animate box&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><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. Rangka kerja umum telah ditulis, tag <code><div>. Seterusnya tambahkan kod teks padanya. Letakkan kod dalam <span> Anda boleh menulis apa sahaja yang anda mahu dalam teks saya menulis "css3 untuk melaksanakan kesan animasi teks mudah"

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

ok, kod html sudah selesai

3. Bahagian teras pelaksanaan css3: animasi CSS dan gaya fon. Atribut

animate digunakan untuk mengikat animasi pada elemen div, diukur dalam piksel. Apabila atribut animate ditakrifkan untuk elemen, elemen anaknya mendapat kesan perspektif, bukan elemen itu sendiri. Biar saya tunjukkan cara menulis kod di bawah Mula-mula, tambahkan rentetan kod head antara teg <style type="text/css"><style>, kemudian masukkan saiz fon, jidar dan reka letak (menetapkan lebar dan tinggi elemen). contoh teks dalam teg style.

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

4. Kotak kotak

Model kotak merujuk kepada: elemen reka letak secara intuitif pada halaman web Setiap kotak mempunyai kawasan kandungan dan jarak dan sempadan pilihan. Biar saya tunjukkan kepada anda cara menulis kod di bawah Kaedah menambah kod rentetan di antara teg kepala di atas adalah sama Masukkan warna, kelegapan dan mengimbangi teks dalam teg <style type="text/css"><style> contoh kod. style

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

Tambahkan pada kotak animation, kerana ini ialah elemen @keyframes yang bergerak pada kelajuan tetap, contoh kod. div

@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;
  }

Tutorial Video CSS3