Hanya dalam lima langkah, anda boleh menggunakan HTML5/CSS3 untuk mencipta kesan nota melekit (gambar)_html5 petua tutorial dengan cepat

Perkara yang akan ditunjukkan oleh artikel ini kepada anda ialah cara menggunakan HTML5/CSS3 untuk mencipta halaman HTML dengan kesan nota melekit dalam hanya 5 langkah Penyajiannya adalah seperti berikut:
(Nota: Teks dalam gambar adalah rekaan semata-mata. untuk tujuan lucu , sebarang persamaan adalah kebetulan semata-mata, terima kasih )

Nota: Kesan ini boleh dilihat dalam Safari, Chrome, Firefox dan Opera Kerana sokongan yang tidak lengkap untuk HTML5, IE Tidak kelihatan kesan.
Langkah 1: Cipta HTML dan petak asas
Mula-mula tambahkan struktur HTML asas dan bina petak asas, kodnya adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

• Dudu :

  
  

  Mengapa tidak ada wanita cantik membuat siaran baru-baru ini? Saya pasti akan mengesyorkan tajuk, syorkan!

  
  


• ;h2>Pakcik Tom:
  

  Seorang ahli Pasukan pergi ke Microsoft untuk bekerja di SDE3, dan dia terpaksa mengupah ahli baharu

  ; li>
  
• 
  

  Saudara teknikal:

  
  

  O2DS adalah buku yang sama Saya menterjemah, saya mesti lebih cepat daripada dia saya akan bekerja lebih masa pada waktu malam, cepat!

  
  a href=" #">


• 
  

  Jiri Gala:

  🎜>

  Buat pengurusan kebenaran dan pengurusan aliran kerja mengikut kebolehan saya hanya sedikit sahaja

  ;
  

  Seorang ahli seni mempertahankan diri tertentu:

  
  

  Saya tidak akan pergi ke temu duga kurang daripada 25,000 yuan lagi, itu nenek

  
  

, kod CSS adalah seperti berikut:





Salin kod


Kod tersebut adalah seperti berikut:

*{
margin:0;
padding:0;
}

body{

font-family:arial,sans-serif; margin:3em ; latar belakang:#666; warna:#fff; }

h2,p{

saiz fon: 100%; :normal;

}
ul,li{
list-style:none;
ul li a {
teks-hiasan:tiada; warna:#000; :10em;
padding:1em;
}
ul li{
margin:1em;
float:left; seperti berikut:


Langkah 2: Bayang-bayang dan kursif tulisan tangan
Dalam langkah ini, kami ingin mencapai kesan bayang-bayang segi empat sama dan menukar fon kepada kursif (Bahasa Inggeris sahaja). Sokongan API fon, kami Ia boleh digunakan secara langsung Mula-mula tambahkan panggilan ke API Google:





Salin kod


Kodnya adalah seperti berikut:





Kemudian tetapkan untuk merujuk fon ini:





Salin kod

Kodnya adalah seperti berikut:

ul li h2
{
saiz fon: 140%;
}
ul li p

{

font-family: "Reenie Beanie" ,arial,sans-serif,Microsoft Yahei font-size: 110% }
Mengenai bayang-bayang, kerana setiap pelayar tidak menyokongnya sepenuhnya, ia perlu dikendalikan secara berasingan Kodnya adalah seperti berikut:

Salin kod Kodnya adalah seperti berikut:

ul li a
{
teks-hiasan: tiada;
warna: #000
latar belakang : #ffc;
paparan: blok;
tinggi: 10em;
lebar: 10em; /* Firefox */
-moz-box-shadow rgba(33,33,33 ,1); /* Safari Chrome */
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}


Kesannya adalah seperti berikut:

Langkah 3: Condongkan segi empat sama
Untuk mencondongkan segi empat sama , kita perlu menambah kod berikut dalam li->a:

Salin kod

Kodnya adalah seperti berikut:

ul li a{

-webkit-transform:rotate(-6deg

-o-transform:rotate(); -6deg);
-moz-transform:rotate(-6deg) ;
}


Tetapi untuk membuat petak condong secara rawak dan bukannya semua condong, kita perlu menggunakan pemilih CSS3 baharu untuk mencondongkan segi empat sama sebanyak 4 darjah setiap 2 dan setiap 3 Setiap kecondongan mempunyai negatif 3 darjah dan setiap 6 kecondongan mempunyai 5 darjah:

Salin kod

Kodnya adalah seperti berikut:

ul li:nth-child(even) a{

-o-transform:rotate(4deg -webkit-transform:rotate(4deg);

-moz-transform :rotate(4deg); -kanak-kanak(3n) a{
-o-transform:rotate(-3deg ); 🎜>kedudukan:relatif;
atas:-5px;
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg>-webkit -transform:rotate(5deg);
-moz-transform:rotate(5deg ); kesan adalah seperti berikut:


Langkah 4: Tuding dan Fokus Zum segi empat sama
Untuk mencapai kesan zum semasa tuding dan fokus, kita perlu menambah kod berikut:





Salin kod


Kod tersebut adalah seperti berikut:


ul li a:hover,ul li a:focus{

-moz-box-shadow: 10px 10px 7px rgba(0,0,0,.7 ); 🎜>bayang-kotak: 10px 10px 7px rgba(0,0,0,.7); -o-transform: skala(1.25);
kedudukan:relatif;
z- indeks:5; segi empat sama apabila dizum masuk. Pada masa yang sama, kerana fokus juga ditetapkan, ia turut menyokong akses penukaran kunci Tab Kesan Seperti berikut:

Langkah 5: Peralihan lancar dan tambah warna
The. kesan khas dalam langkah 4 kelihatan agak kaku Kita boleh menambah Peralihan untuk mencapai kesan animasi yang licin Selain itu, warnanya agak tunggal :

Salin kod

Kod adalah seperti berikut:

-moz-transition: -moz-transform .15s linear;
-o-transition:-o-transform .15s linear;
-webkit-transition :-webkit-transform .15s linear; tentukan warna yang berbeza dalam genap dan 3n:





Salin kod

Kodnya adalah seperti berikut:

ul li:nth-child(even) a{
-o-transform:rotate(4deg); );
kedudukan:relatif;

atas:5px;

latar belakang:#cfc; } ul li:nth-child(3n) a{ -o-transform: rotate(-3deg); -webkit-transform:rotate(-3deg); 🎜>latar belakang:#ccf; }

Dengan cara ini, kami telah menyelesaikan kesan terakhir kami:

Ringkasan
Pada ketika ini, kami telah menggunakan ciri asas HTML5 dan CSS3 untuk mencipta kesan nota melekit yang cukup bagus memang sangat Ia hebat Jika anda menambah beberapa ciri lanjutan, seperti menggabungkannya dengan JavaScript, anda boleh mencapai kesan yang lebih hebat Anda boleh melihat ini daripada siri artikel HTML5 yang diberikan oleh Dang Knight Brick.
Juga: Teks dalam gambar adalah rekaan semata-mata.