Der Produktionsprozess der Tutorial-Fähigkeiten für den Weihnachts-Countdown 2014 webpage_html5

Die Weihnachtszeit 2014 steht vor der Tür. Der Herausgeber von iCoding teilt Ihnen eine Weihnachts-Countdown-Webseite für 2014 mit. Die Datumskarte des Tages hat einen beunruhigenden Effekt. Werfen wir einen Blick auf die Renderings:

Klicken Sie mit der Maus vor Nummer 5

Nach dem Klicken auf Nr. 5

Implementierungscode.

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

　　css3代码：

C/C-Code复制内容到剪贴板

1. Körper {   
2.   Hintergrund: url("xmas.jpg");   
3.  Farbe: #fff;   
4.   Schriftfamilie: 'Oleo Script', kursiv;   
5.   padding: 20px;   
6.   Schriftstärke: 400;   
7. }   
8.   
9. h1 {   
10.   marge:0;   
11.   Schriftgröße:75px;   
12.   Linienhöhe: 75px;   
13.   text-align: center;   
14.   Schriftstärke: 400;   
15. }   
16.   
17. ul {   
18.   margin:0 auto 30px auto;   
19.   padding:0;   
20.   list-style-type:none;   
21.   max-width:900px;   
22.   Breite: 100 %;   
23.   text-align: center;   
24.   user-select: none;   
25. }   
26.   
27. li {   
28.   Schriftstärke: 400;   
29.   Hintergrundfarbe: #fff;   
30.   box-sizing: border-box;   
31.   Rahmenradius: 6px;   
32.   display: inline-block;   
33.  Farbe:#111;   
34.   cursor:pointer;   
35.   Schriftgröße: 26px;   
36.   padding:15px;   
37.   Rand:25px 12px;   
38.   Breite: 130px;   
39.   height:130px;   
40.   Linienhöhe: 100px;   
41.   text-align:center;   
42.   Position: relativ;   
43.   vertikal-align:top;   
44.   user-select: none;   
45.   Perspektive: 800px;   
46.   Übergang: alle 0,4 s ease-in-out;   
47. }   
48.   
49. ul li:last-child {   
50.   
51.   background-size:cover;     
52.   display:block;   
53.   clear:both;   
54.   margin: 20px auto 0 auto;   
55.   Breite: 200px;   
56.   Höhe: 275px;   
57. }   
58.   
59. ul li:last-child .door {   
60.   Schriftgröße: 100px;   
61.   Breite: 200px;   
62.   Höhe: 275px;   
63.   Zeilenhöhe: 240px;   
64. }  
65.   
66. ul li:dernier-enfant .révélé {   
67.   hauteur de ligne : 123 px ;   
68. }   
69.   
70. .door {   
71.   sélection par l'utilisateur : aucun ;   
72.   couleur :#fff;   
73.   taille de la police : 70 px ;   
74.   position : absolue ;   
75.   haut : 0 ;   
76.   gauche : 0 ;   
77.   couleur de fond : #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.   bordure gauche : 1px #eee solid ;   
83.   bordure-rayon : 6 px ;   
84.   remplissage : 15 px ;   
85.   largeur : 130 px ;   
86.   hauteur : 130 px ;   
87.   origine de la transformation : 0 40 % ;    
88.   transition : tous les 0,4 s sont faciles à entrer ;   
89.   transform-style : preserve-3d ;   
90. }   
91.   
92. .current .door {   
93.   couleur de fond : #7EAD44 ;   
94. }   
95.   
96. .current .door.open{   
97.   couleur : #7EAD44 ;   
98. }   
99.   
100. .révélé {   
101.   sélection par l'utilisateur : aucun ;   
102. }   
103.   
104. #message {   
105.   box-sizing : border-box ;   
106.   couleur : #222 ;   
107.   affichage : aucun ;   
108.   taille de la police : 24 px ;   
109.   remplissage : 20 px ;   
110.   fond : #eddecb ;   
111.   largeur maximale : 500 px ;   
112.   largeur : 100 % ;   
113.   bordure-rayon : 15 px ;   
114.   marge : 0 auto ;   
115. }   
116.   
117. .open {   
118.   box-shadow : 14px 0px 15px -1px rgba(0,0,0,0.2);   
119.   couleur : #91c1cc ;   
120.   transformation : rotate3d(0, 1, 0, -98deg);   
121. }   
122.   
123. .jiggle {   
124.   animation : secouement 0,2 s infini ;   
125.   transformation : rotation (-1deg);   
126. }   
127.   
128. @keyframes jiggle {   
129.   0% {   
130.         transformation : rotation (-1deg);   
131.   }  
132.   50 % {   
133.       transformation : rotate(1deg);   
134.   }   
135. }   
136.   
137. @media screen et (largeur minimale : 480px) {   
138.   li {   
139.     marge : 25px 20px ;   
140.   }   
141. }   
142.   
143.   
144. @media screen et (largeur minimale : 768px) {   
145.     corps {   
146.         taille de l'arrière-plan : 150 px ;   
147.     }   
148.        
149.     p {   
150.         à droite : 6 % ;   
151.         en haut : 20 % ;   
152.         en bas : auto ;    
153.         marge gauche : auto ;   
154.         à gauche : auto ;   
155.     }   
156. }