La representación es la siguiente:
Puntos de conocimiento utilizados en el desarrollo del artefacto de confesión del Día de la Reina del 8 de marzo: escenas css33D, transformaciones 3D, habilidades para hacer el amor, habilidades para hacer cubos 3D, animaciones personalizadas, operaciones de nodo DOM js nativo, bucles, etc.
:point_down:código html:
<div id=display> </div> <div class='heart3d'> <div class='rib1'></div> <div class='rib2'></div> <div class='rib3'> </div> <div class='rib4'></div> <div class='rib5'></div> <div class='rib6'></div> <div class='rib7'></ div> <div class='rib8'></div> <div class='rib9'></div> <div class='rib10'></div> <div class='rib11'></div> <div class= 'rib12'></div> <div class='rib13'></div> <div class='rib14'></div> <div class='rib15'></div> <div class='rib16'></div> <div class='rib17'></div> <div class='rib18'></div> <div class='rib19'></div> <div class= 'rib20'></div> <div class='rib21'></div> <div class='rib22'></div> <div class='rib23'></div> <div class='rib24'></div> <div class='rib25'></div> <div class='rib26'></div> <div class='rib27'></div> <div class= 'rib28'></div> <div class='rib29'></div> <div class='rib30'></div> <div class='rib31'></div> <div class='rib32'></div> <div class='rib33'></div> <div class='rib34'></div> <div class='rib35'></div> <div class= 'rib36'></div> <div class=per> <div class=img><img width=50 height=50 src=images/1.jpg /></div> <div class=img><img ancho=50 alto=50 src=images/2.jpg /></div> <div class=img><img ancho=50 alto=50 src=images/3.jpg /></div> <div class= img><img ancho=50 alto=50 src=images/4.jpg /></div> <div class=img><img ancho=50 alto=50 src=images/5.jpg /></div> <div class=img><img width=50 height=50 src=images/6.jpg /></div> </div> </div>
:point_down:código CSS:
<estilo>/*Guardarropa de hoja de estilo CSS*/ *{margin:0px;padding:0px;}/*Eliminar los márgenes exteriores e interiores predeterminados*/ body{fondo:#000;} .heart3d { posición: absoluta; 0; derecha: 0; abajo: 0; origen de transformación: centro centro; transformar-estilo: preservar-3d; animación: girar 15 s infinito lineal; } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left :100px;top:100px;} .heart3d [clase^=rib] { posición: absoluto ancho: 100px alto: 160px; borde: sólido #f22613; ancho del borde: 1px 1px 0 0; radio del borde: 50% 50% 0/40% 50% 0 } .heart3d [clase$=1] { transformar: rotarY(10deg) rotarZ (45 grados) traducirX(30px); } .heart3d [clase$=2] { transformar: rotarY (20 grados) rotarZ (45 grados) traducirX (30 px); { transformar: rotarY (40 grados) rotarZ (45 grados) traducirX (30 px} .heart3d); [clase$=5] { transformar: rotarY(50deg) rotarZ(45deg) traducirX(30px); } .heart3d [clase$=6] { transformar: rotarY(60deg) rotarZ(45deg) traducirX(30px); [clase $ = 7] { transformar: rotarY (70 grados) rotarZ (45 grados) traducirX (30 px); .heart3d [clase $ = 8] { transformar: rotarY (80 grados) rotarZ (45 grados) traducirX (30 px); .heart3d [clase$=10] { transformar: rotarY(100grados) rotarZ(45grados) traducirX(30px); } .heart3d [clase$=11] { transformar: rotarY(110grados) rotarZ(45grados) traducirX(30px } .heart3d [clase$=12] { transformar: rotarY(120grados) rotarZ(45grados) traducirX(30px); } .heart3d [clase$=13] { transformar: rotarY (130 grados) rotar Z (45 grados) traducirX (30 px); } .heart3d [clase $ = 14] { transformar: rotar Y (140 grados) rotar Z (45 grados) traducir X (30 px); rotarY (150 grados) rotar Z (45 grados) traducirX (30 px); .heart3d [clase $ = 16] { transformar: rotarY (160 grados) rotarZ (45 grados) traducirX (30 px); .heart3d [clase$=18] { transformar: rotarY(180°) rotarZ(45°) traducirX(30px); } .heart3d [clase$=19] { transformar: rotarY(190grados) rotarZ(45grados) traducirX(30px } .heart3d [clase$=20] { transformar: rotarY(200grados) rotarZ(45grados) traducirX(30px); } .heart3d [clase$=21] { transformar: rotarY (210 grados) rotarZ (45 grados) traducirX (30 px); } .heart3d [clase $ = 22] { transformar: rotar Y (220 grados) rotar Z (45 grados) traducir X (30 px); -transformar: rotarY (230 grados) rotar Z (45 grados) traducirX (30 px); transformar: rotarY (230 grados) rotarZ (45 grados) traducirX (30 px); transformar: rotarY (250 grados) rotar Z (45 grados) traducirX (30 px); .heart3d [clase $ = 26] { transformar: rotarY (260 grados) rotarZ (45 grados) traducirX (30 px); .heart3d [clase$=28] { transformar: rotarY(280°) rotarZ(45°) traducirX (30px); } .heart3d [clase $ = 29] { transformar: rotarY (290 grados) rotarZ (45 grados) traducirX (30 px) } .heart3d [clase $ = 30] { transformar: rotar Y (300 grados) rotar Z (45 grados) traducirX(30px); } .heart3d [clase$=31] { transformar: rotarY (310 grados) rotar Z (45 grados) traducirX (30 px); } .heart3d [clase $ = 32] { transformar: rotar Y (320 grados) rotar Z (45 grados) traducir X (30 px); rotarY(330grados) rotarZ(45grados) traducirX(30px); .heart3d [clase $ = 34] { transformar: rotarY (340 grados) rotarZ (45 grados) traducirX (30 px); .heart3d [clase$=36] { transformar: rotarY(360°) rotarZ(45°) traducirX(30px); } @keyframes girar { a { transformar: rotarY(360deg) rotarX(360deg); 0;abajo:0; margen:automático;estilo de transformación: preservar-3d;perspectiva:800px; .img{ancho:50px;alto:50px;posición:absoluta;visibilidad de la cara posterior:hidden; } .img:nth-child(1){top:-50px;left:0;transform-origin:bottom; (30px) rotarX (90 grados);} .img:nth-child(2){top:50px;left:0;transform-origin:top; transform:translateZ(30px) rotarX(-90deg);} .img:nth-child(3){top:0px ;izquierda:-50px;transformar-origen:derecha; transformar:translateZ(30px) rotarY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; transform:translateZ(30px) turnY(90deg);} .img:nth-child(6){top:0px; izquierda: 0; transformar: traducirZ (30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </estilo>:point_down:código javascript:
<script> var i = 0; var str1 = Para un productor de páginas web, el lenguaje HTML no debe ser desconocido, porque el lenguaje HTML es la base de toda producción de páginas web. Pero si la página puede ser cómoda de usar para los internautas, amigable y generosa, incluso como una aplicación de escritorio, entonces confiar únicamente en el lenguaje HTML no es suficiente, JavaScript juega un papel importante en esto. var str = Si amas a alguien y sigues enamorado, pueden salir juntos a principios de la primavera, disfrutar juntos de los lotos en pleno verano, mirar la luna juntos en el otoño claro y buscar juntos las flores de los ciruelos a finales del invierno, sin enojarnos. cansado de ello, pero feliz, extraordinario, pero ordinario. Entonces no habrá arrepentimientos en esta vida. ; window.onload = función escribiendo(){ var mydiv = document.getElementById(display); mydiv.innerHTML += var id = setTimeout; (escribiendo,100); if(i==str.length){ clearTimeout(id). mydiv.innerHTML += //alert(¡Ejecución del programa completada!); ResumirLo anterior es la herramienta de desarrollo HTML5 para la confesión del Día de la Reina presentada por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!