The production process of the 2014 Christmas countdown webpage

The production process of the 2014 Christmas countdown webpage_html5 tutorial skills

WBOY

Release： 2016-05-16 15:47:07

Original

1556 people have browsed it

The Christmas season of 2014 is coming. The editor of iCoding shares with you a 2014 Christmas countdown webpage. The date card of the day has a jittering effect. Let’s take a look at the renderings:

Click the mouse before number 5

After clicking No. 5

Implementation code.

　html code:

XML/HTML CodeCopy content to clipboard

<h1>
Merry Christmash1>
<ul>
<li>
<div class="door">
1div>
li>
<li>
<div class="door">
2div>
li>
<li>
<div class="door">
3div>
li>
<li>
<div class="door">
4div>
li>
<li>
<div class="door">
5div>
li>
<li>
<div class="door">
6div>
li>
<li>
<div class="door">
7div>
li>
<li>
<div class="door">
8div>
li>
<li>
<div class="door">
9div>
li>
<li>
<div class="door">
10div>
li>
<li>
<div class="door">
11div>
li>
<li>
<div class="door">
12div>
li>
<li>
<div class="door">
13div>
li>
<li>
<div class="door">
14div>
li>
<li>
<div class="door">
15div>
li>
<li>
<div class="door">
16div>
li>
<li>
<div class="door">
17div>
li>
<li>
<div class="door">
18div>
li>
<li>
<div class="door">
19div>
li>
<li>
<div class="door">
20div>
li>
<li>
<div class="door">
21div>
li>
<li>
<div class="door">
22div>
li>
<li>
<div class="door">
23div>
li>
<li>
<div class="door">
24div>
li>
<li>
<div class="door">
25div>
li>
ul>
<p id="message">
p>

　　css3代码：

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

body {
background: url("xmas.jpg");
color: #fff;
font-family: 'Oleo Script', cursive;
padding: 20px;
font-weight: 400;
}
h1 {
margin:0;
font-size:75px;
line-height: 75px;
text-align: center;
font-weight: 400;
}
ul {
margin:0 auto 30px auto;
padding:0;
list-style-type:none;
max-width:900px;
width: 100%;
text-align: center;
user-select: none;
}
li {
font-weight: 400;
background-color: #fff;
box-sizing: border-box;
border-radius: 6px;
display: inline-block;
color:#111;
cursor:pointer;
font-size: 26px;
padding:15px;
margin:25px 12px;
width: 130px;
height:130px;
line-height: 100px;
text-align:center;
position: relative;
vertical-align:top;
user-select: none;
perspective: 800px;
transition: all 0.4s ease-in-out;
}
ul li:last-child {
background-size:cover;
display:block;
clear:both;
margin: 20px auto 0 auto;
width: 200px;
height: 275px;
}
ul li:last-child .door {
font-size: 100px;
width: 200px;
height: 275px;
line-height: 240px;
}
ul li:anak terakhir .didedahkan {
ketinggian garisan: 123px;
}
.pintu {
pilihan pengguna: tiada;
warna:#fff;
saiz fon: 70px;
kedudukan: mutlak;
atas:0;
kiri:0;
warna latar belakang: #91c1cc;
bersaiz kotak: kotak sempadan;
atas sempadan: 2px #eee putus-putus;
sempadan-kanan: 2px #eee berputus-putus;
bahagian bawah sempadan: 2px #eee putus-putus;
sempadan-kiri: 1px #eee pepejal;
jejari sempadan: 6px;
padding:15px;
lebar: 130px;
tinggi:130px;
asal-ubah: 0 40%;
peralihan: semua 0.4s kemudahan masuk;
gaya-transform: preserve-3d;
}
.pintu semasa {
warna latar belakang: #7EAD44;
}
.pintu semasa.terbuka{
warna: #7EAD44;
}
.didedahkan {
pilihan pengguna: tiada;
}
#mesej {
bersaiz kotak: kotak sempadan;
warna: #222;
paparan: tiada;
saiz fon: 24px;
pelapis: 20px;
latar belakang: #eddecb;
lebar maksimum: 500px;
lebar: 100%;
jejari sempadan: 15px;
margin: 0 auto;
}
.buka {
bayang kotak: 14px 0px 15px -1px rgba(0,0,0,0.2);
warna: #91c1cc;
transformasi: putar3d(0, 1, 0, -98deg);
}
.goyang {
animasi: goyang 0.2s tak terhingga;
transformasi: putar(-1deg);
}
@keyframes goyang {
0% {
transformasi: putar(-1deg);
}
50% {
transformasi: putar(1deg);
}
}
@media skrin dan (min-lebar: 480px) {
li {
margin:25px 20px;
}
}
skrin @media dan (lebar min: 768px) {
badan {
saiz latar belakang:150px;
}
p {
kanan: 6%;
atas: 20%;
bawah: auto;
margin-kiri: auto;
kiri: auto;
}
}