Proses pengeluaran kemahiran tutorial halaman web_html5 hitung detik Krismas 2014

Musim Krismas 2014 akan datang. Editor iCoding berkongsi dengan anda halaman web hitung detik Krismas 2014 Kad tarikh pada hari itu mempunyai kesan yang membingungkan. Mari lihat pemaparan:

Klik tetikus sebelum nombor 5

Selepas mengklik No. 5

Kod pelaksanaan.

　kod html:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <h1>  
2.         Selamat Krismash1>  
3.     <ul>  
4.         <li>  
5.              <div kelas="> >  
6.                  1div>  
7.         li>  
8.         <li>  
9.             <div kelas="> >
  
10.                  2div>
  
11.         li>
  
12.         <li>
  
13.              <div kelas="> >
14.                     3div>
15.            li>
16.            <li>
17.                <div kelas=">
>
18.                    4div
>
19.            li
>
20.            <li
>  
21.             <div kelas="> >  
22.                 5div>  
23.         li>  
24.         <li>  
25.             <div kelas="> >
  
26.                 6div>
  
27.         li>
  
28.         <li>
  
29.             <div kelas="> >
30.                     7div>
31.            li>
32.            <li>
33.                <div kelas=">
>
34.                     8div
>
35.            li
>
36.            <li
>
37.                <div kelas=">
38. >                    9div
39. >           li
<🎜>>  
40.         <li>  
41.             <div kelas="> >  
42.                  10div>  
43.         li>  
44.         <li>  
45.             <div kelas="> >
  
46.                 11div>
  
47.         li>
  
48.         <li>
  
49.             <div kelas="> >
50.                     12div>
51.            li>
52.            <li>
53.                <div kelas=">
>
54.                     13div
>
55.            li
>
56.            <li
>
57.                <div kelas=">
58. >                    14div
<🎜>>  
59.         li>  
60.         <li>  
61.             <div kelas="> >  
62.                  15div>  
63.         li>  
64.         <li>  
65.             <div kelas="> >
  
66.                  16div>
  
67.         li>
  
68.         <li>
  
69.             <div kelas="> >
70.                     17div>
71.            li>
72.            <li>
73.                <div kelas=">
>
74.                     18div
>
75.            li
>
76.            <li
>
77.                <div kelas=">
<🎜>>  
78.                  19div>  
79.         li>  
80.         <li>  
81.             <div kelas="> >  
82.                  20div>  
83.         li>  
84.         <li>  
85.             <div kelas="> >
  
86.                  21div>
  
87.         li>
  
88.         <li>
  
89.             <div kelas="> >
90.                     22div>
91.            li>
92.            <li>
93.                <div kelas=">
>
94.                     23div
>
95.            li
>
96.            <li
>  
97.             <div kelas="> >  
98.                  24div>  
99.         li>  
100.         <li>  
101.             <div kelas="> >
  
102.                  25div>
  
103.         li>
  
104.     ul>
  
105.     <p id="mesej" >
  
106.     p>
  

　　

css3代码：

Kod C/C

复制内容到剪贴板

1. badan {   
2.   latar belakang: url("xmas.jpg");   
3.   warna: #fff;   
4.   fon-keluarga: 'Oleo Script', kursif;   
5.   pelapis: 20px;   
6.   berat fon: 400;   
7. }   
8.   
9. h1 {   
10.   margin:0;   
11.   saiz fon:75px;   
12.   ketinggian garisan: 75px;   
13.   text-align: center;   
14.   berat fon: 400;   
15. }   
16.   
17. ul {   
18.   margin:0 auto 30px auto;   
19.   padding:0;   
20.   jenis-gaya-senarai:tiada;   
21.   lebar maksimum:900px;   
22.   lebar: 100%;   
23.   text-align: center;   
24.   pilihan pengguna: tiada;   
25. }   
26.   
27. li {   
28.   berat fon: 400;   
29.   warna latar belakang: #fff;   
30.   bersaiz kotak: kotak sempadan;   
31.   jejari sempadan: 6px;   
32.   paparan: sebaris-sekat;   
33.   warna:#111;   
34.   kursor:penunjuk;   
35.   saiz fon: 26px;   
36.   padding:15px;   
37.   margin:25px 12px;   
38.   lebar: 130px;   
39.   tinggi:130px;   
40.   ketinggian garisan: 100px;   
41.   text-align:center;   
42.   kedudukan: saudara;   
43.   vertical-align:top;   
44.   pilihan pengguna: tiada;   
45.   perspektif: 800px;   
46.   peralihan: semua 0.4s kemudahan masuk;   
47. }   
48.   
49. ul li:anak terakhir {   
50.   
51.   saiz latar belakang:sarung;     
52.   paparan:sekat;   
53.   jelas:keduanya;   
54.   margin: 20px auto 0 auto;   
55.   lebar: 200px;   
56.   tinggi: 275px;   
57. }   
58.   
59. ul li:anak terakhir .pintu {   
60.   saiz fon: 100px;   
61.   lebar: 200px;   
62.   tinggi: 275px;   
63.   ketinggian garisan: 240px;   
64. }  
65.   
66. ul li:last-child .revealed {   
67.   Linienhöhe: 123px;   
68. }   
69.   
70. .door {   
71.   user-select: none;   
72.   color:#fff;   
73.   Schriftgröße: 70px;   
74.   Position: absolut;   
75.   top:0;   
76.   links:0;   
77.   Hintergrundfarbe: #91c1cc;   
78.   box-sizing: border-box;   
79.   border-top: 2px #eee dashed;   
80.   border-right: 2px #eee dashed;   
81.   border-bottom: 2px #eee dashed;   
82.   border-left: 1px #eee solid;   
83.   Rahmenradius: 6px;   
84.   padding:15px;   
85.   Breite: 130px;   
86.   height:130px;   
87.   transform-origin: 0 40%;    
88.   Übergang: alle 0,4 s ease-in-out;   
89.   transform-style: preserve-3d;   
90. }   
91.   
92. .current .door {   
93.   Hintergrundfarbe: #7EAD44;   
94. }   
95.   
96. .current .door.open{   
97.  Farbe: #7EAD44;   
98. }   
99.   
100. .revealed {   
101.   user-select: none;   
102. }   
103.   
104. #message {   
105.   box-sizing: border-box;   
106.  Farbe: #222;   
107.   Anzeige: keine;   
108.   Schriftgröße: 24px;   
109.   padding: 20px;   
110.   Hintergrund: #eddecb;   
111.   maximale Breite: 500 Pixel;   
112.   Breite: 100 %;   
113.   Rahmenradius: 15px;   
114.   margin: 0 auto;   
115. }   
116.   
117. .open {   
118.   box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);   
119.  Farbe: #91c1cc;   
120.   transform: rotate3d(0, 1, 0, -98deg);   
121. }   
122.   
123. .jiggle {   
124.   Animation: wackeln 0,2 s unendlich;   
125.   transform: rotate(-1deg);   
126. }   
127.   
128. @keyframes jiggle {   
129.   0 % {   
130.         transformieren: rotate(-1deg);   
131.   }  
132.   50 % {   
133.       transform: rotate(1deg);   
134.   }   
135. }   
136.   
137. @media screen and (min-width: 480px) {   
138.   li {   
139.     Rand:25px 20px;   
140.   }   
141. }   
142.   
143.   
144. @media screen and (min-width: 768px) {   
145.     Körper {   
146.         Hintergrundgröße:150px;   
147.     }   
148.        
149.     p {   
150.         richtig: 6 %;   
151.         oben: 20 %;   
152.         unten: auto;    
153.         margin-left: auto;   
154.         links: auto;   
155.     }   
156. }