Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta teks untuk mencapai animasi bingkai demi bingkai (dengan kod)

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan css3 untuk mencipta kesan bar navigasi yang sejuk (penjelasan kod terperinci) ", saya memperkenalkan anda cara menggunakan css3 untuk mencipta navigasi yang sejuk kesan bar. Artikel berikut akan memperkenalkan kepada anda cara menggunakan CSS untuk mencipta teks untuk mencapai animasi bingkai demi bingkai Mari kita lihat cara melakukannya.

Animasi bingkai demi bingkai teks ialah komponen yang paling biasa dalam halaman web Tambahkan kesan animasi bingkai demi bingkai pada teks you the renderings

Setelah melihat kesannya, mari kita kaji cara mencapainya

Langkah kaedah

Bahagian HTML

1 Cipta html untuk mentakrifkan div tajuk yang mengandungi teks dan gunakan atribut class untuk menggayakannya.

Contoh kod penyuntingan HTML

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

Kesan kod

Selepas pengeditan Html ditulis, gunakan gaya css untuk mengubah suainya.

Bahagian CSS

1. Tambahkan warna latar belakang pada halaman web

body{
  background:#333;
}

2 🎜> atribut Tambahkan gaya dan warna jidar elemen, dan gunakan atribut cell untuk meletakkannya di tengah-tengah. dashedposition：absoluteContoh kod

3

.cell{
    width: 1em;  
    height: 1em;
    border:1px dashed rgba(255,255,255,0.1);
    font-size:120px;
    font-family:Frijole;
    overflow: hidden;
    position:absolute;
    top:50%;
    left:50%;
    margin:-0.5em 0 0  -0.5em;
    opacity:0;
    animation:go 6s;
        transform-origin:left bottom;｝

gaya teks tajuk menggunakan atribut

num untuk menghidupkan bingkai demi bingkai dan menggunakan atribut animation untuk menambah. bayang dan warna teks, dan Gunakan atribut steps() untuk meletakkannya di tengah-tengah. text-shadowposition：absolute

Seterusnya, kami menambah kesan animasi untuk menjadikan teks dinamik dan mencapai kesan animasi bingkai demi bingkai.

.num{
    position:absolute;
    width: 1em;
    color:#E53F39;
    line-height: 1em;  
    text-align: center;
    text-shadow:1px 1px 2px rgba(255,255,255,.3);
    animation:run 6s steps(6);
}

Ikat animasi animasi pada teg num.

Gunakan dua peraturan @keyframes untuk menetapkan tindakan bagi setiap bingkai dua animasi.

Kesan akhir

@keyframes run{
    0%{top:0;}
    100%{top:-6em;}
}
@keyframes go{
  0%   {opacity:1;}
  84%  {opacity:1;transform:rotate(0deg) scale(1);}
  100% {opacity:0;transform:rotate(360deg) scale(.01);}
}

Kod lengkap diberikan di bawah

[Tamat]

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

Pembelajaran yang disyorkan:

Tutorial video CSS

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta teks untuk mencapai animasi bingkai demi bingkai (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!