A renderização é a seguinte:
Pontos de conhecimento usados no desenvolvimento do Artefato de Confissão do Dia da Rainha de 8 de março: cenas css33D, transformações 3D, habilidades para fazer amor, habilidades para fazer cubos 3D, animações personalizadas, operações de nó js DOM nativo, loops, 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 largura=50 altura=50 src=images/2.jpg /></div> <div class=img><img largura=50 altura=50 src=images/3.jpg /></div> <div class= img><img largura=50 altura=50 src=images/4.jpg /></div> <div class=img><img largura=50 altura=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:
<style>/* Guarda-roupa de folha de estilo CSS*/ *{margin:0px;padding:0px;}/*Remover margens externas e internas padrão*/ body{background:#000;} .heart3d { posição: topo absoluto: 0; direita: 0; transformar-origem: centro centro; estilo de transformação: preserve-3d; animação: rotação infinita de 15s } #display{largura:200px;cor:branco;tamanho da fonte:24px;espaço em branco:normal;recuo do texto:55px;posição:absoluto;esquerda :100px;top:100px;} .heart3d [class^=rib] { posição: largura absoluta: 100px; 160px; borda: sólida #f22613; largura da borda: 1px 1px 0 0; raio da borda: 50% 50% 0/40% 50% 0; (45 graus) traduzirX(30px } .heart3d [class$=2] {transformar: girarY(20deg) girarZ(45deg) traduzirX(30px); .heart3d [class$=3] {transformar: girarY(30deg) girarZ(45deg) traduzirX(30px); {transformar: girarY(40deg) girarZ(45deg) traduzirX(30px } .heart3d); [classe$=5] {transformação: girarY(50deg) girarZ(45deg) traduzirX(30px); [class$=7] {transformar: girarY(70deg) girarZ(45deg) traduzirX(30px }); .heart3d [classe$=8] {transformação: girarY(80deg) girarZ(45deg) traduzirX(30px); .heart3d [class$=10] { transformação: girarY(100deg) girarZ(45deg) traduzirX(30px); } .heart3d [classe$=11] { transformar: girarY(110deg) girarZ(45deg) traduzirX(30px } .heart3d [classe$=12] { transformar: girarY(120deg) girarZ(45deg) traduzirX(30px } .heart3d [class$=13] { transformar: girarY (130 graus) girar Z (45 graus) traduzirX (30px); girarY(150deg) girarZ(45deg) traduzirX(30px }); .heart3d [classe$=16] {transformação: girarY(160deg) girarZ(45deg) traduzirX(30px); .heart3d [class$=18] { transformação: girarY(180deg) girarZ(45deg) traduzirX(30px); } .heart3d [classe$=19] { transformar: girarY(190deg) girarZ(45deg) traduzirX(30px } .heart3d [classe$=20] { transformar: girarY(200deg) girarZ(45deg) traduzirX(30px } .heart3d [class$=21] { transformar: girarY (210 graus) girar Z (45 graus) traduzirX (30px); -transformar: girarY(230deg) girarZ(45deg) traduzirX(30px); transformar: girarY(230deg) girarZ(45deg) traduzirX(30px } .heart3d [classe$=24] { transformar: girarY(240deg) girarZ(45deg) traduzirX(30px } .heart3d [classe$=25] { transformar: girarY(250deg) girarZ(45deg) traduzirX(30px }); .heart3d [classe$=26] {transformação: girarY(260deg) girarZ(45deg) traduzirX(30px); .heart3d [class$=28] {transformação: girarY(280deg) girarZ(45deg) traduzirX(30px); } .heart3d [classe$=29] { transformar: girarY(290deg) girarZ(45deg) traduzirX(30px } .heart3d [classe$=30] { transformar: girarY(300deg) girarZ(45deg) traduzirX(30px } .heart3d [class$=31] { transformar: girarY (310 graus) girar Z (45 graus) traduzirX (30px); girarY(330deg) girarZ(45deg) traduzirX(30px }); .heart3d [classe$=34] {transformação: girarY(340deg) girarZ(45deg) traduzirX(30px); .heart3d [class$=36] { transformação: girarY(360deg) girarZ(45deg) traduzirX(30px); } @keyframes girar { para { transformar: girarY(360deg) girarX(360deg); 0;fundo:0;margem:auto;estilo de transformação: preserve-3d;perspectiva:800px } .img{largura:50px;altura:50px;posição:absoluta;backface-visibility:hidden; } .img:nth-child(1){top:-50px;esquerda:0;transform-origin:bottom; (30px) girarX(90deg);} .img:nth-child(2){top:50px;esquerda:0;transform-origin:top; transform:translateZ(30px) rotacionarX(-90deg);} .img:nth-child(3){top:0px ;esquerda:-50px;origem-da-transformação:direita;transformar:traduzirZ(30px) girarY(-90deg);} .img:nth-child(4){top:0px;esquerda:50px;transform-origin:left; transform:translateZ(30px) girarY(90deg);} .img:nth-child(6){top:0px; esquerda:0;transformar:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:código javascript:
<script> var i = 0; var str1 = Para um produtor de páginas web, a linguagem HTML não deve ser desconhecida, pois a linguagem HTML é a base para toda produção de páginas web. Mas se a página pode ser conveniente para os internautas usarem, amigável e generosa, até mesmo como um aplicativo de desktop, então confiar apenas na linguagem HTML não é suficiente, o JavaScript desempenha um papel importante nisso. ; var str = Se você ama alguém e continua apaixonado, vocês podem sair juntos no início da primavera, desfrutar de lótus juntos no meio do verão, observar a lua juntos no outono claro e procurar flores de ameixeira juntos no final do inverno, sem se encontrarem. cansado disso, mas feliz, extraordinário, mas comum. Então, não haverá arrependimentos nesta vida. ;window.onload = digitação de função(){ var mydiv = document.getElementById('btn'); (digitando,100); if(i==str.length){ clearTimeout(id); mydiv.innerHTML += //alert(Execução do programa concluída!); ResumirO texto acima é a ferramenta de desenvolvimento HTML5 para a confissão do Dia da Rainha apresentada pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!