2014 크리스마스 카운트다운 제작 과정 webpage_html5 튜토리얼 스킬

2014년 크리스마스 시즌이 다가오고 있습니다. iCoding의 편집자가 2014년 크리스마스 카운트다운 웹페이지를 공유합니다. 오늘의 날짜 카드에는 불안한 효과가 있습니다. 렌더링을 살펴보겠습니다.

5번 앞에 마우스를 클릭하세요

5번 클릭 후

구현 코드.

　html 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

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

　　css3代码：

C/C 코드复复内容到剪贴板

1. 본체 {   
2.   배경: url("xmas.jpg");   
3.   색상: #fff;   
4.   font-family: 'Oleo Script', 필기체;   
5.   패딩: 20px;   
6.   글꼴 두께: 400;   
7. }   
8.   
9. h1 {   
10.   여백:0;   
11.   글꼴 크기:75px;   
12.   줄 높이: 75px;   
13.   text-align: center;   
14.   글꼴 두께: 400;   
15. }   
16.   
17. ul {   
18.   여백:0 자동 30px 자동;   
19.   패딩:0;   
20.   목록 스타일 유형:없음;   
21.   최대 너비:900px;   
22.   너비: 100%;   
23.   text-align: center;   
24.   사용자 선택: 없음;   
25. }   
26.   
27. 리 {   
28.   글꼴 두께: 400;   
29.   배경색: #fff;   
30.   박스 크기: 테두리 상자;   
31.   테두리 반경: 6px;   
32.   디스플레이: 인라인-블록;   
33.   색상:#111;   
34.   커서:포인터;   
35.   글꼴 크기: 26px;   
36.   패딩:15px;   
37.   여백:25px 12px;   
38.   너비: 130px;   
39.   높이:130px;   
40.   줄 높이: 100px;   
41.   text-align:center;   
42.   위치: 상대적;   
43.   세로 정렬:상단;   
44.   사용자 선택: 없음;   
45.   관점: 800px;   
46.   전환: 모두 0.4초 ease-in-out;   
47. }   
48.   
49. ul li:last-child {   
50.   
51.   배경 크기:표지;     
52.   디스플레이:블록;   
53.   clear:both;   
54.   여백: 20px 자동 0 자동;   
55.   너비: 200px;   
56.   높이: 275px;   
57. }   
58.   
59. ul li:last-child .door {   
60.   글꼴 크기: 100px;   
61.   너비: 200px;   
62.   높이: 275px;   
63.   줄 높이: 240px;   
64. }  
65.   
66. ul li:last-child .revealed {   
67.   줄 높이: 123px;   
68. }   
69.   
70. .door {   
71.   사용자 선택: 없음;   
72.   색상:#fff;   
73.   글꼴 크기: 70px;   
74.   위치: 절대;   
75.   상위:0;   
76.   왼쪽:0;   
77.   배경색: #91c1cc;   
78.   박스 크기: 테두리 상자;   
79.   테두리 상단: 2px #eee 점선;   
80.   경계 오른쪽: 2px #eee 점선;   
81.   테두리 하단: 2px #eee 점선;   
82.   테두리 왼쪽: 1px #eee 단색;   
83.   테두리 반경: 6px;   
84.   패딩:15px;   
85.   너비: 130px;   
86.   높이:130px;   
87.   변환 원본: 0 40%;    
88.   전환: 모두 0.4초 ease-in-out;   
89.   변환 스타일: preserve-3d;   
90. }   
91.   
92. .current .door {   
93.   배경색: #7EAD44;   
94. }   
95.   
96. .current .door.open{   
97.   색상: #7EAD44;   
98. }   
99.   
100. .공개 {   
101.   사용자 선택: 없음;   
102. }   
103.   
104. #message {   
105.   박스 크기: 테두리 상자;   
106.   색상: #222;   
107.   디스플레이: 없음;   
108.   글꼴 크기: 24px;   
109.   패딩: 20px;   
110.   배경: #eddecb;   
111.   최대 너비: 500px;   
112.   너비: 100%;   
113.   테두리 반경: 15px;   
114.   여백: 0 auto;   
115. }   
116.   
117. .open {   
118.   상자 그림자: 14px 0px 15px -1px rgba(0,0,0,0.2);   
119.   색상: #91c1cc;   
120.   변환: rotate3d(0, 1, 0, -98deg);   
121. }   
122.   
123. .jiggle {   
124.   애니메이션: 흔들림 0.2초 무한;   
125.   변환: 회전(-1deg);   
126. }   
127.   
128. @keyframes jiggle {   
129.   0% {   
130.         변환: 회전(-1deg);   
131.   }  
132.   50% {   
133.       변형: 회전(1도);   
134.   }   
135. }   
136.   
137. @media 화면 및 (최소 너비: 480px) {   
138.   리 {   
139.     여백:25px 20px;   
140.   }   
141. }   
142.   
143.   
144. @media 화면 및 (최소 너비: 768px) {   
145.     본문 {   
146.         배경 크기:150px;   
147.     }   
148.        
149.     p {   
150.         오른쪽: 6%;   
151.         상위: 20%;   
152.         하단: auto;    
153.         여백-왼쪽: auto;   
154.         왼쪽: 자동;   
155.     }   
156. }