Cara membuat pautan sepanduk animasi menggunakan HTML dan CSS

Gambaran Keseluruhan

Kami boleh membuat sepanduk animasi menggunakan HTML dan CSS, HTML menyediakan susun atur sepanduk, dan CSS menyediakan gaya sepanduk dengan kesan animasi. Kadangkala, dalam sepanduk yang dibuat untuk tujuan pengiklanan, pautan dibenamkan, dan untuk menyerlahkan pautan, pembangun menganimasikan pautan itu supaya ia boleh dilihat di seluruh kandungan web dan meningkatkan minat pengguna untuk mengklik.

Tatabahasa

Sintaks untuk mencipta pautan dalam HTML ialah -

<a href="#"></a>

Algoritma

Langkah 1−Buat fail HTML dalam editor teks dan tambahkan templat HTML padanya.

Langkah 2 − Sekarang buat bekas div induk yang mengandungi sepanduk dengan nama kelas "bannerCover".

<div class="bannerCover"></div>

Langkah 3 − Sekarang buat div sub-bekas yang mengandungi pautan dan data lain, dan tambahkan kelas yang dipanggil "sepanduk".

<div class="banner"></div>

Langkah 4 − Sekarang tambahkan pautan pada sepanduk menggunakan tag anchor HTML.

<a href="https://www.tutorialspoint.com">tutorialspoint</a>

Langkah 5 − Sekarang buat fail style.css dalam folder yang sama dan pautkan fail css ke dokumen HTML.

<link rel="stylesheet" href="style.css">

Langkah 6− Sekarang gayakan sepanduk untuk setiap elemen HTML.

.bannerCover {
   margin: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.banner{
   box-shadow: 0 0 5px gray;
   padding:2rem;
   border-radius: 5px;
   text-align: center;
}

Langkah 7 − Letakkan elemen tag anchor dan hidupkan pautan menggunakan sifat animasi.

a {
   text-decoration: none;
   font-weight: 800;
   font-size: 2rem;
   color: green;
   padding: 0 2rem;
   animation: zoomup 1s linear alternate infinite;
}

Langkah 8 − Gunakan bingkai utama untuk menghidupkan pautan sepanduk.

@keyframes zoomup{
   0%{
      font-size: 2rem;
   }
   25%{
      font-size: 2rem;
   }
   50%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   75%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   100%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
}   

Langkah 9 − Pautan animasi telah berjaya dibuat.

Contoh

Dalam contoh di atas, kami membina pautan animasi dalam sepanduk. Untuk melakukan ini, kami mencipta dua fail: index.html dan stye.css.

   
   <link rel="stylesheet" href="style.css">
    


   

      

         <a href="https://www.tutorialspoint.com">tutorialspoint</a>
         
(Click the above text to redirect to above page.)
      
   

Imej di bawah menunjukkan output contoh di atas, secara lalai warna pautan adalah putih. Dalam imej di bawah, terdapat teks dalam sepanduk yang mengatakan "tutorialspoint", jadi apabila pengguna memuatkan ciri ini ke dalam penyemak imbas dan mengklik pada kandungan latar belakang merah, ia akan mengubah hala pengguna ke halaman web yang dipautkan. Pautan dalam sepanduk adalah dianimasikan dan boleh mengecut dan membesar dalam tempoh masa tertentu.

Kesimpulan

Memandangkan kami menggunakan kandungan animasi dalam contoh di atas, nama dalam sifat animasi CSS dan nama animasi dalam bingkai utama mestilah sama untuk menganimasikan elemen tertentu, jika tidak, animasi tidak akan berlaku.

Atas ialah kandungan terperinci Cara membuat pautan sepanduk animasi menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!