Proses pengeluaran kemahiran tutorial halaman web_html5 hitung detik Krismas 2014-Tutorial H5-php.cn

Proses pengeluaran kemahiran tutorial halaman web_html5 hitung detik Krismas 2014

WBOY

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

asal

1557 orang telah melayarinya

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

<h1>
Selamat Krismash1>
<ul>
<li>
<div kelas="> >
1div>
li>
<li>
<div kelas="> >
2div>
li>
<li>
<div kelas="> >
3div>
li>
<li>
<div kelas=">
4div
li
<li
<div kelas="> >
5div>
li>
<li>
<div kelas="> >
6div>
li>
<li>
<div kelas="> >
7div>
li>
<li>
<div kelas=">
8div
li
<li
<div kelas=">
> 9div
> li
<li>
<div kelas="> >
10div>
li>
<li>
<div kelas="> >
11div>
li>
<li>
<div kelas="> >
12div>
li>
<li>
<div kelas=">
13div
li
<li
<div kelas=">
> 14div
li>
<li>
<div kelas="> >
15div>
li>
<li>
<div kelas="> >
16div>
li>
<li>
<div kelas="> >
17div>
li>
<li>
<div kelas=">
18div
li
<li
<div kelas=">
19div>
li>
<li>
<div kelas="> >
20div>
li>
<li>
<div kelas="> >
21div>
li>
<li>
<div kelas="> >
22div>
li>
<li>
<div kelas=">
23div
li
<li
<div kelas="> >
24div>
li>
<li>
<div kelas="> >
25div>
li>
ul>
<p id="mesej" >
p>

css3代码：

Kod C/C

复制内容到剪贴板

badan {
latar belakang: url("xmas.jpg");
warna: #fff;
fon-keluarga: 'Oleo Script', kursif;
pelapis: 20px;
berat fon: 400;
}
h1 {
margin:0;
saiz fon:75px;
ketinggian garisan: 75px;
text-align: center;
berat fon: 400;
}
ul {
margin:0 auto 30px auto;
padding:0;
jenis-gaya-senarai:tiada;
lebar maksimum:900px;
lebar: 100%;
text-align: center;
pilihan pengguna: tiada;
}
li {
berat fon: 400;
warna latar belakang: #fff;
bersaiz kotak: kotak sempadan;
jejari sempadan: 6px;
paparan: sebaris-sekat;
warna:#111;
kursor:penunjuk;
saiz fon: 26px;
padding:15px;
margin:25px 12px;
lebar: 130px;
tinggi:130px;
ketinggian garisan: 100px;
text-align:center;
kedudukan: saudara;
vertical-align:top;
pilihan pengguna: tiada;
perspektif: 800px;
peralihan: semua 0.4s kemudahan masuk;
}
ul li:anak terakhir {
saiz latar belakang:sarung;
paparan:sekat;
jelas:keduanya;
margin: 20px auto 0 auto;
lebar: 200px;
tinggi: 275px;
}
ul li:anak terakhir .pintu {
saiz fon: 100px;
lebar: 200px;
tinggi: 275px;
ketinggian garisan: 240px;
}
ul li:last-child .revealed {
Linienhöhe: 123px;
}
.door {
user-select: none;
color:#fff;
Schriftgröße: 70px;
Position: absolut;
top:0;
links:0;
Hintergrundfarbe: #91c1cc;
box-sizing: border-box;
border-top: 2px #eee dashed;
border-right: 2px #eee dashed;
border-bottom: 2px #eee dashed;
border-left: 1px #eee solid;
Rahmenradius: 6px;
padding:15px;
Breite: 130px;
height:130px;
transform-origin: 0 40%;
Übergang: alle 0,4 s ease-in-out;
transform-style: preserve-3d;
}
.current .door {
Hintergrundfarbe: #7EAD44;
}
.current .door.open{
Farbe: #7EAD44;
}
.revealed {
user-select: none;
}
#message {
box-sizing: border-box;
Farbe: #222;
Anzeige: keine;
Schriftgröße: 24px;
padding: 20px;
Hintergrund: #eddecb;
maximale Breite: 500 Pixel;
Breite: 100 %;
Rahmenradius: 15px;
margin: 0 auto;
}
.open {
box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);
Farbe: #91c1cc;
transform: rotate3d(0, 1, 0, -98deg);
}
.jiggle {
Animation: wackeln 0,2 s unendlich;
transform: rotate(-1deg);
}
@keyframes jiggle {
0 % {
transformieren: rotate(-1deg);
}
50 % {
transform: rotate(1deg);
}
}
@media screen and (min-width: 480px) {
li {
Rand:25px 20px;
}
}
@media screen and (min-width: 768px) {
Körper {
Hintergrundgröße:150px;
}
p {
richtig: 6 %;
oben: 20 %;
unten: auto;
margin-left: auto;
links: auto;
}
}