Gracias por el A2A,
El código va a ser largo. No rechaces el voto por favor.
A diferencia de otras respuestas que sugirieron complementos de jquery, me gusta construir cosas por mí mismo, siempre que no sea la última noche antes de la fecha límite.
- Cómo crear mi propio sitio web o blog en WordPress
- ¿Cómo puede alguien ganar dinero con un sitio web y cómo?
- Cómo obtener el script completo de un sitio web
- ¿Por qué la gente se avergüenza de admitir que hace cosas como leer chismes de celebridades o reality shows de mala calidad (por ejemplo, Jersey Shore (serie de televisión))?
- ¿Cuál es el mejor sitio web para aprender sitios web receptivos de corte y arranque?
Entonces, empezando a trabajar,
1.HTML junto con el pequeño código js
Tada!
Algún texto en mi página recién cargada …
var myVar;
function myFunction () {
myVar = setTimeout (showPage, 3000);
}
función showPage () {
document.getElementById (“wrap”). style.display = “none”;
document.getElementById (“myDiv”). style.display = “block”;
}
2. El CSS enormemente largo
.wrapper {
posición: relativa;
margen: 40px automático;
fondo: blanco;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
–webkit-box-sizing: border-box;
tamaño de la caja: border-box;
}
.wrapper {
ancho: 250 px;
altura: 250 px;
}
.wrapper .pie {
ancho: 50%;
altura: 100%;
origen de transformación: 100% 50%;
posición: absoluta;
fondo: # 08C;
borde: 5px rgba sólido (0,0,0,0.5);
}
.wrapper .spinner {
radio de borde: 100% 0 0 100% / 50% 0 0 50%;
índice z: 200;
borde derecho: ninguno;
animación: rota 5s lineal;
modo de relleno de animación: hacia delante;
}
.wrapper: hover .spinner,
.wrapper: hover .filler,
.wrapper: hover .mask {
animación-play-state: corriendo;
}
.wrapper .filler {
radio de borde: 0 100% 100% 0/0 50% 50% 0;
izquierda: 50%;
opacidad: 0;
índice z: 100;
animación: opa 5s pasos (1, final) inversa;
modo de relleno de animación: hacia delante;
borde izquierdo: ninguno;
}
.wrapper .mask {
ancho: 50%;
altura: 100%;
posición: absoluta;
fondo: heredar;
opacidad: 1;
índice z: 300;
animación: opa 5s pasos (1, final);
modo de relleno de animación: hacia delante;
}
.wrapper .percentage {
posición: absoluta;
ancho: 40px;
altura: 20px;
desbordamiento: oculto;
abajo: -30px;
izquierda: 42%;
}
.wrapper .percentage: después de {
contenido: attr (data-val);
posición: absoluta;
arriba: 0;
izquierda: 0;
altura de línea: 20 px;
alineación de texto: derecha;
animación: perc 5s pasos (1, final);
}
@keyframes perc {
0% {margin-top: 0px;}
1% {margin-top: -20px;}
2% {margin-top: -40px;}
3% {margin-top: -60px;}
4% {margin-top: -80px;}
5% {margin-top: -100px;}
6% {margin-top: -120px;}
7% {margin-top: -140px;}
8% {margin-top: -160px;}
9% {margin-top: -180px;}
10% {margin-top: -200px;}
11% {margin-top: -220px;}
12% {margin-top: -240px;}
13% {margin-top: -260px;}
14% {margin-top: -280px;}
15% {margin-top: -300px;}
16% {margin-top: -320px;}
17% {margin-top: -340px;}
18% {margin-top: -360px;}
19% {margin-top: -380px;}
20% {margin-top: -400px;}
21% {margin-top: -420px;}
22% {margin-top: -440px;}
23% {margin-top: -460px;}
24% {margin-top: -480px;}
25% {margin-top: -500px;}
26% {margin-top: -520px;}
27% {margin-top: -540px;}
28% {margin-top: -560px;}
29% {margin-top: -580px;}
30% {margin-top: -600px;}
31% {margin-top: -620px;}
32% {margin-top: -640px;}
33% {margin-top: -660px;}
34% {margin-top: -680px;}
35% {margin-top: -700px;}
36% {margin-top: -720px;}
37% {margin-top: -740px;}
38% {margin-top: -760px;}
39% {margin-top: -780px;}
40% {margin-top: -800px;}
41% {margin-top: -820px;}
42% {margin-top: -840px;}
43% {margin-top: -860px;}
44% {margin-top: -880px;}
45% {margin-top: -900px;}
46% {margin-top: -920px;}
47% {margin-top: -940px;}
48% {margin-top: -960px;}
49% {margin-top: -980px;}
50% {margin-top: -1000px;}
51% {margin-top: -1020px;}
52% {margin-top: -1040px;}
53% {margin-top: -1060px;}
54% {margin-top: -1080px;}
55% {margin-top: -1100px;}
56% {margin-top: -1120px;}
57% {margin-top: -1140px;}
58% {margin-top: -1160px;}
59% {margin-top: -1180px;}
60% {margin-top: -1200px;}
61% {margin-top: -1220px;}
62% {margin-top: -1240px;}
63% {margin-top: -1260px;}
64% {margin-top: -1280px;}
65% {margin-top: -1300px;}
66% {margin-top: -1320px;}
67% {margin-top: -1340px;}
68% {margin-top: -1360px;}
69% {margin-top: -1380px;}
70% {margin-top: -1400px;}
71% {margin-top: -1420px;}
72% {margin-top: -1440px;}
73% {margin-top: -1460px;}
74% {margin-top: -1480px;}
75% {margin-top: -1500px;}
76% {margin-top: -1520px;}
77% {margin-top: -1540px;}
78% {margin-top: -1560px;}
79% {margin-top: -1580px;}
80% {margin-top: -1600px;}
81% {margin-top: -1620px;}
82% {margin-top: -1640px;}
83% {margin-top: -1660px;}
84% {margin-top: -1680px;}
85% {margin-top: -1700px;}
86% {margin-top: -1720px;}
87% {margin-top: -1740px;}
88% {margin-top: -1760px;}
89% {margin-top: -1780px;}
90% {margin-top: -1800px;}
91% {margin-top: -1820px;}
92% {margin-top: -1840px;}
93% {margin-top: -1860px;}
94% {margin-top: -1880px;}
95% {margin-top: -1900px;}
96% {margin-top: -1920px;}
97% {margin-top: -1940px;}
98% {margin-top: -1960px;}
99% {margin-top: -1980px;}
100% {margin-top: -2000px;}
}
@keyframes rota {
0% {
transformar: rotar (0deg);
}
100% {
transformar: rotar (360 grados);
}
}
@keyframes opa {
0% {
opacidad: 1;
}
50%, 100% {
opacidad: 0;
}
}
#myDiv {
pantalla: ninguno;
alinear texto: centro;
}
En caso de que todavía estés leyendo, sé que el diseño es bastante pobre y parece viejo. Obviamente, puede hacer un poco de esfuerzo para que se vea mejor.
Y, en caso de que te hayas dado cuenta, es un poco defectuoso. Pheww !!
