Die Darstellung ist wie folgt:
Wissenspunkte, die bei der Entwicklung des Geständnisartefakts zum Königinnentag am 8. März verwendet wurden: CSS33D-Szenen, 3D-Transformationen, Fähigkeiten zum Liebesspiel, Fähigkeiten zum Erstellen von 3D-Würfeln, benutzerdefinierte Animationen, native JS-DOM-Knotenoperationen, Schleifen usw.
:point_down:html-Code:
<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 width=50 height=50 src=images/2.jpg /></div> <div class=img><img width=50 height=50 src=images/3.jpg /></div> <div class= img><img width=50 height=50 src=images/4.jpg /></div> <div class=img><img width=50 height=50 src=images/5.jpg /></div> <div class=img><img width=50 height=50 src=images/6.jpg /></div> </div> </div>
:point_down:css-code:
<style>/*Css-Stylesheet-Garderobe*/ *{margin:0px;padding:0px;}/*Standardmäßige Außenränder und Innenränder entfernen*/ body{background:#000;} .heart3d { position: absolute; 0; rechts: 0; links: 0; Breite: 160 Pixel; Transformationsstil: Preserve-3D; Animation: 15 Sekunden lang unendlich linear drehen :100px;top:100px;} .heart3d [class^=rib] { position: absolute; height: 160px; Rahmen: fest #f22613; Rahmenradius: 50 % 50 % 0 / 40 % 50 % 0; (45deg) translatorX(30px); } .heart3d [class$=2] { transform: rotateY(20deg) rotateZ(45deg) translatorX(30px); { transform: rotateY(40deg) rotateZ(45deg) translatorX(30px} .heart3d); [class$=5] { transform:RotateY(50deg)RotateZ(45Grad) TranslateX(30Pix); [class$=7] { transform: rotateY(70deg) rotateZ(45deg) translatorX(30px); .heart3d [class$=8] { transform: rotateY(80deg) rotateZ(45deg) translatorX(30px); .heart3d [class$=10] { transform: rotierenY(100 Grad) rotierenZ(45 Grad) TranslateX(30Pix); translatorX(30px); } .heart3d [class$=13] { transform: rotierenY(130deg) rotierenZ(45deg) translatorX(30px); } .heart3d [class$=14] { transform: rotierenY(140deg) rotierenZ(45deg) translatorX(30px); } .heart3d [class$=15] { transform: rotierenY(150 Grad) rotierenZ(45 Grad) translatorX(30px); .heart3d [class$=16] { transform:RotateY(160deg)RotateZ(45Grad) TranslateX(30Pix); .heart3d [class$=18] { transform: rotierenY(180 Grad) rotierenZ(45 Grad) TranslateX(30Pix); translatorX(30px); } .heart3d [class$=21] { transform: rotierenY(210deg) rotierenZ(45deg) translatorX(30px); } .heart3d [class$=22] { transform: rotierenY(220deg) rotierenZ(45deg) translatorX(30px); } .heart3d [class$=23] { -webkit -transform: rotierenY(230 Grad) rotierenZ(45 Grad) translatorX(30px); transform: rotateY(230deg) rotateZ(45deg) translatorX(30px); transform: rotateY(250deg) rotateZ(45deg) translatorX(30px } .heart3d [class$=26] { transform:RotateY(260deg)RotateZ(45Grad) TranslateX(30Pix); .heart3d [class$=28] { transform: rotierenY(280 Grad) rotierenZ(45 Grad) TranslateX(30Pix); translatorX(30px); } .heart3d [class$=31] { transform: rotateY(310deg) rotateZ(45deg) translatorX(30px); } .heart3d [class$=32] { transform: rotateY(320deg) rotateZ(45deg) translatorX(30px); } .heart3d [class$=33] { transform: rotierenY(330deg) rotierenZ(45deg) translatorX(30px); .heart3d [class$=34] { transform:RotateY(340deg)RotateZ(45Grad) TranslateX(30Pix); .heart3d [class$=36] { transform: rotierenY(360 Grad) rotierenZ(45 Grad) translatorX(30px); } @keyframes spin { to { transform:RotateY(360deg)RotateX(360Deg); 0;bottom:0; margin:auto;transform-style: preserve-3d;perspective:800px; .img{width:50px;height:50px;position:absolute;backface-visibility:hidden; } .img:nth-child(1){top:-50px;left:0;transform-origin:bottom; transform:translateZ (30px) rotateX(90deg);} .img:nth-child(2){top:50px;left:0;transform-origin:top; transform:translateZ(30px) rotationX(-90deg);} .img:nth-child(3){top:0px ;left:-50px;transform-origin:right; transform:translateZ(30px) rotateY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; transform:translateZ(30px) rotationY(90deg);} .img:nth-child(6){top:0px; left:0;transform:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:Javascript-Code:
<script> var i = 0; var str1 = Für einen Webseitenproduzenten darf die HTML-Sprache nicht unbekannt sein, da die HTML-Sprache die Grundlage für die gesamte Webseitenproduktion ist. Aber wenn die Seite für Internetnutzer bequem zu verwenden, benutzerfreundlich und großzügig sein kann, sogar wie eine Desktop-Anwendung, dann reicht es nicht aus, sich nur auf die HTML-Sprache zu verlassen; JavaScript spielt dabei eine wichtige Rolle. ; var str = Wenn Sie jemanden lieben und verliebt bleiben, können Sie im frühen Frühling gemeinsam einen Ausflug machen, im Hochsommer gemeinsam Lotusblumen genießen, im hellen Herbst gemeinsam den Mond beobachten und im Spätwinter gemeinsam nach Pflaumenblüten suchen, ohne zu bekommen müde davon, aber glücklich, außergewöhnlich, aber gewöhnlich. Dann wird es in diesem Leben kein Bedauern mehr geben. ; window.onload = function typing(){ var mydiv = document.getElementById(display); var oBtn = document.getElementById('btn'); (typing,100); if(i==str.length){ clearTimeout(idiv.value =); mydiv.innerHTML += //alert(Programmausführung abgeschlossen!); } } </script> ZusammenfassenDas Obige ist das vom Herausgeber vorgestellte HTML5-Entwicklungstool für das Geständnis zum Königinnentag. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!