¡Por favor proporcióname un código html de 'Feliz cumpleaños'!
Un amigo vino a verme hace unos días. Me dijo que el cumpleaños de su novia se acercaba y quería preguntarme si podía escribir un código de felicitación de cumpleaños. Por supuesto que no puedes rechazar la solicitud de tu buen hermano, ¡simplemente organízalo directamente!
Así que escribí una página simple en HTML: cuando haces clic para abrirla, mostrará cuánto tiempo ha pasado desde que viniste a este mundo y, bendiciones, después de deslizarte hacia abajo, será una foto giratoria. álbum (con música de fondo).
Enlace original:
código html de feliz cumpleaños
Código principal (código no completo):
#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;
-moz-animation: donghua 15s lineal 0s infinito;
-ms-transform-style.preserve-3d;
-ms-animation: donghua 25s lineal 0s infinito;
}
#head div
{
posición: absoluta
arriba: 0
izquierda: 0; ;
ancho: 300px;
alto: 400px;
borde: 1px sólido #000
alineación de texto: centro;
altura de línea: 100px;
}
#head div: nth-child(1)
{
webkit-transform: rotarY(0deg) traducirZ(400px);
-moz-transform: rotarY(0deg) traducirZ(400px);
-ms-transform: rotarY( 0deg) traducirZ(400px);
fondo: url(images/01.png);
fondo- tamaño: portada;
}12345678910111213141516171819202122232425262728293031
Heart.prototype.draw = function(){
this.size -= this.speedSize;
this.x = this.speedX;
this.y = this.speedY;
ctx.save();
ctx.translate(-1000, this.y);
ctx .scale(este.tamaño, este.tamaño);
ctx.beginPath();
for (var i = 0; i lt; precision; i) {
var vector = this.vertices[i];
ctx.lineTo(vector.x, vector.y);
}
ctx .globalAlpha = this.size;
ctx.shadowBlur = Math.round
((3 - this.size) * 10);
ctx.shadowColor = "hslarestore();
};
función render(a){
requestAnimationFrame(render);
hearts.push(new Heart())
ctx.clearRect(0, 0, ww, wh);
for (var i = 0; i lt; corazones.longitud; i ) {
corazones[i].draw();
if(corazones[i].tamaño lt; = 0) {
corazones.splice(i, 1);
i--;
}
}
}
}
onResize();
window.addEventListener("0", "0", "0", "0", "0 ", "0", "0", "0", "0", "0", "0", "0onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
window.οnlοad=función starttime() {
time(h1, '2000, 1, 1'); // Hora de nacimiento
ptimer = setTimeout(starttime, 1000); // agregar temporizador
función time(obj, futimg){
var nowtime = new Date().getTime() // nowtime se ha convertido en una marca de tiempo
var Futuretime = ?new Date(futimg).getTime(); // Convertir tiempo futuro en marca de tiempo
var msec = nowtime-futruetime // Tiempo futuro en milisegundos - nowtime
var tiempo = (mseg/ 1000); // milisegundos/1000
var día = parseInt(time/86400); // día ?24*60*60*1000
var hora = parseInt(time/3600)-24*day; // hora 60*60 horas totales - horas pasadas = horas presentes
var minuto = parseInt(time3600/60); -(día*24) en incrementos de 60 segundos toma el resto de segundos segundos/60 son los minutos
var second = parseInt(time60);// toma 60 segundos como fracción y toma el resto. como los segundos restantes
obj.
InnerHTML="Chan Chanlt; brgt; Has venido al mundo: lt; brgt; " día "día " hora " hora " minuto " minuto " segundo " segundo " "uplt; brgt; lt. spangt; Hoy es tuyo On tu cumpleaños, que toda la alegría, toda la felicidad, todo el calor y toda la buena suerte te rodeen ;Sorpresalt;brgt;Happinesslt;/pgt;"
Return true;
}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484 950515253545556575859606162
El efecto es el siguiente:
Este texto interior puede ser modificado por usted mismo, la hora seguirá corriendo y la hora de nacimiento puede ser Cambiado al de tu novia.
Lo que se desliza a continuación es la foto rotada:
Puedes modificar la foto tú mismo.
Nuevo:
Muchos amigos quieren abrir archivos en sus teléfonos móviles. En este momento, necesitan cambiar la dirección y la dirección de audio de la imagen (puedes enviar un comentario). solo es visible para usted, y luego puede generar la dirección del enlace de la imagen). En este momento, solo necesita enviar el archivo html y se puede abrir con el navegador móvil.
La dirección de la imagen de arriba se reemplaza por la URL del enlace de la imagen (uno**** diez).
Para el archivo de audio, proporcionaré un enlace aquí (puede haber caducado): /upload/dance/20200305/D1E8DB5EB16A57732BDD636C759DA034.mp3
Reemplace la dirección en la imagen de arriba con esa de la URL del enlace de audio.
Todos pueden encontrar enlaces externos de música en línea.
Si se trata de una grabación específica, puede utilizar este método: utilice un archivo adjunto de correo electrónico, como QQ email, para enviarse un correo electrónico, adjunte la música como archivo adjunto y utilice la dirección de descarga. adjuntos, que es el enlace de descarga de la canción.
Proyecto completo:
Aquí tenéis diez fotos y dos músicas de fondo que encontré yo mismo (puedes sustituirlas por música que hayas grabado tú mismo), así como instrucciones de uso.
Dirección completa del proyecto: código html de feliz cumpleaños