Proporcioneme un código html de 'Feliz cumpleaños'.
Así que escribí una página simple en html: al hacer clic, mostrará cuánto tiempo ha pasado desde que vine a este mundo y mis palabras de bendición. Después de deslizarlo, será un álbum de fotos giratorio (con. música de fondo).
Enlace original:
Código HTML de feliz cumpleaños
Código principal (código incompleto):
#head
{
Ancho: 100;
Alto: 100;
Posición: absoluta
-WebKit-transform-style ：preservar; -3d;
-WebKit-Animation: Donghua 15s lineal 0s infinito;
-moz-transform-style: preserve-3d
- Mozi-Animation; : Donghua 15s lineal 0s infinito;
-ms-transform-style: preserve-3d;
-ms-animation: Donghua 25s lineal 0s infinito;
}
#Partición de título
{
Posición: absoluta;
arriba: 0;
Izquierda: 0;
Ancho: 300px
Alto: 400px
Borde: 1px sólido #000
Alineación del texto: Centrado
Alto de fila: 100 px;
}
# head div: n-child(1)
{
-WebKit-transform: rotar Y (0 grados) traducir z (400 px);
-moz-transform: rotar Y (0 grados) traducir z (400 px); -transformar: rotarY(0 grados)traducir z(400 px);
Fondo: URL(images/01 . png);
Tamaño del fondo: Portada;
}12345678910111213141516171819202122232425262728293031
prototipo de corazón. dibujar = función(){
este tamaño-= tamaño de velocidad;
esto. y);
ctx.scale(este.tamaño, este . tamaño);
CTX .begin path();
for(var I = 0 ; ilt precisión; i) {
var vector = this .vertices[I];
ctx.lineTo(vector.x, vector .y);
p>
}
CTX . alfa global = este . tamaño;
CTX . desenfoque de sombra = ronda matemática ((3-este . tamaño)* 10);
ctx.shadowColor = "hsla(0, 100, 60, 0.5)";
CTX .
ion = "pantalla"
CTX .cerrar ruta();
ctx.fill()
restaurar(); >};
Representación de función(a){
requestAnimationFrame(render);
hearts.push(nuevo corazón())
ctx.clearRect(0, 0, ww, wh);
for(var I = 0; ilthearts.lengthi) {
Corazones[i]. draw();
if (corazones[i].sizelt=0){
corazones.splice(i, 1);
I-; /p>
}
}
}
onResize();
ventana addevent listener(" mousemove ", en movimiento);
ventana . addevent oyente(" tocar mover ", en movimiento);
ventana addevent oyente(" cambiar tamaño ", en cambiar tamaño);
requestAnimationFrame(render);
ventana .οon load = function starttime(){
Hora (h1,'2000,1,1'); //Hora de nacimiento< / p>
ptimer = setTimeout(starttime, 1000); //Agregar temporizador
}
Tiempo de función (obj, futimg){
var nowtime = nuevaFecha(). getTime(); //Convierte la hora actual en una marca de tiempo.
var tiempofuturo=? Nueva fecha (en el futuro). getTime(); //Convierte la hora futura en marca de tiempo
var msec = now time-futruetime; //Milisegundo de hora futura-hora actual
var time =(msec/1000); ? //ms /1000
var día = parse int(time/86400); //¿Día? 24*60*60*1000
var hora = parseInt(time/3600)-24 *day; //Horas 60*60 horas totales-horas pasadas = horas actuales
var minuto = parseInt(time 3600/60); //minuto-(día*24) toma 60 segundos en total y toma los segundos restantes. Segundos/60 son minutos.
var segundo = parseInt(tiempo 60);? //Toma los 60 segundos totales y los segundos restantes.
Obj.innerHTML= "Chen Chen
Devuelve verdadero
}123456789101112131415161718192021222324252627282930313233343536373 8394041424344454647484 50515253545556575859606162
El efecto es el siguiente:
Usted mismo puede modificar el texto aquí, la hora seguirá avanzando y la hora de nacimiento se cambiará a la de su novia.
Hay fotos que giran después de deslizarse:
Puedes cambiar las fotos tú mismo.
Suplemento:
Muchos amigos quieren abrir archivos en sus teléfonos móviles y necesitan cambiar la dirección de la imagen y la dirección del audio (puedes enviar una charla que solo tú puede ver y luego puede generar la dirección del enlace de la imagen). En este momento, simplemente envíe un archivo html y podrá abrirlo con el navegador del móvil.
La dirección de la imagen de arriba ha sido reemplazada por la URL del enlace de la imagen (un * * * diez).
Para el archivo de audio, proporciono un enlace aquí (puede que esté desactualizado): /upload/dance/2020 03 05/d 1 E8 db 5 EB 16a 57732 BDD 636 c 759 da 034. MP3.
La dirección en la imagen de arriba se cambia a la URL del enlace de audio.
Puedes encontrar enlaces de música online.
Si se trata de una grabación específica, puedes utilizar este método: envíate un correo electrónico como archivo adjunto, como el buzón QQ, y adjunta la música como archivo adjunto. La dirección utilizada para descargar el archivo adjunto al recibir el correo electrónico es el enlace de descarga de la canción.
Proyecto completado:
Hay diez fotos que encontré yo mismo, dos piezas de música de fondo (se pueden cambiar a mi propia grabación) e instrucciones de uso.
Dirección completa del proyecto: código html de feliz cumpleaños