Le rendu est le suivant :
Points de connaissances utilisés dans le développement de l'artefact de confession de la fête de la Reine du 8 mars : scènes CSS33D, transformations 3D, compétences en matière de création d'amour, compétences en création de cubes 3D, animations personnalisées, opérations de nœuds DOM js natifs, boucles, etc.
:point_down:code 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 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 hauteur=50 src=images/4.jpg /></div> <div class=img><img width=50 hauteur=50 src=images/5.jpg /></div> <div class=img><img width=50 hauteur=50 src=images/6.jpg /></div> </div> </div>
:point_down:code CSS :
<style>/*Garde-robe de feuille de style CSS*/ *{margin:0px;padding:0px;}/*Supprimer les marges extérieures et intérieures par défaut*/ body{background:#000;} .heart3d { position: Absolute top: 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; marge : auto ; hauteur : 160 px ; style de transformation : préserver-3d ; animation : rotation linéaire infinie de 15 s ; } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left :100px;top:100px;} .heart3d [class^=rib] { position : absolue largeur : 100px hauteur : 160px ; bordure : solide #f22613 ; largeur de bordure : 1px 1px 0 0 ; rayon de bordure : 50 % 50 % 0 / 40 % 50 % 0 ; (45deg) traduireX(30px); } .heart3d [class$=2] { transformation : rotationY(20deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=3] { transformation : rotationY(30deg) rotationZ(45deg) translationX(30px) } .heart3d [class$=4] { transformation : rotationY(40deg) rotationZ(45deg) translationX(30px } .heart3d); [class$=5] { transformation : rotationY(50deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=6] { transformation : rotationY(60deg) rotationZ(45deg) translationX(30px) } .heart3d ; [class$=7] { transformation : rotationY(70deg) rotationZ(45deg) translationX(30px) ; .heart3d [class$=8] { transformation : rotationY(80deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=9] { transformation : rotationY(90deg) rotationZ(45deg) translationX(30px) ; .heart3d [class$=10] { transformation : rotationY(100deg) rotationZ(45deg) traduireX(30px); } .heart3d [class$=11] { transformation : rotationY(110deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=12] { transformation : rotationY(120deg) rotationZ(45deg) traduireX(30px); } .heart3d [class$=13] { transformer : rotationY(130deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=14] { transformation : rotationY(140deg) rotationZ(45deg) translationX(30px); rotationY(150deg) rotationZ(45deg) translationX(30px }); .heart3d [class$=16] { transformation : rotationY(160deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=17] { transformation : rotationY(170deg) rotationZ(45deg) translationX(30px }); .heart3d [class$=18] { transformation : rotationY(180deg) rotationZ(45deg) traduireX(30px); } .heart3d [class$=19] { transformation : rotationY(190deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=20] { transformation : rotationY(200deg) rotationZ(45deg) traduireX(30px); } .heart3d [class$=21] { transformer : rotationY(210deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=22] { transformation : rotationY(220deg) rotationZ(45deg) translationX(30px); -transform : rotationY(230deg) rotationZ(45deg) translationX(30px) ; transformation : rotationY(230deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=24] { transformation : rotationY(240deg) rotationZ(45deg) translationX(30px); transformation : rotationY(250deg) rotationZ(45deg) translationX(30px }); .heart3d [class$=26] { transformation : rotationY(260deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=27] { transformation : rotationY(270deg) rotationZ(45deg) translationX(30px }); .heart3d [class$=28] { transformation : rotationY(280deg) rotationZ(45deg) traduireX(30px); } .heart3d [class$=29] { transformation : rotationY(290deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=30] { transformation : rotationY(300deg) rotationZ(45deg) traduireX(30px); } .heart3d [class$=31] { transformer : rotationY(310deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=32] { transformation : rotationY(320deg) rotationZ(45deg) translationX(30px); rotationY(330deg) rotationZ(45deg) translationX(30px }); .heart3d [class$=34] { transformation : rotationY(340deg) rotationZ(45deg) translationX(30px); } .heart3d [class$=35] { transformation : rotationY(350deg) rotationZ(45deg) translationX(30px) ; .heart3d [class$=36] { transformation : rotationY(360deg) rotationZ(45deg) traduireX(30px); } @keyframes spin { à { transform: rotateY(360deg) rotateX(360deg); } } .per{ width:50px;height:50px;position:absolute;top:0;left:0;right : 0;bas :0 ; marge :auto ;style de transformation : préserver-3d ;perspective :800 px ; .img{largeur:50px;hauteur:50px;position:absolue;backface-visibility:hidden; } .img:nth-child(1){top:-50px;left:0;transform-origin:bottom; (30px) rotationX(90deg);} .img:nth-child(2){top:50px;left:0;transform-origin:top; transform:translateZ(30px) rotateX(-90deg);} .img:nth-child(3){top:0px ;gauche:-50px;transform-origin:right; transform:translateZ(30px) rotateY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; transform:translateZ(30px) rotateY(90deg);} .img:nth-child(6){top:0px; gauche:0;transformation:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:code javascript :
<script> var i = 0; var str1 = Pour un producteur de pages Web, le langage HTML ne doit pas être étranger, car le langage HTML est la base de toute production de pages Web. Mais si la page peut être pratique à utiliser pour les internautes, conviviale et généreuse, même comme une application de bureau, alors s'appuyer uniquement sur le langage HTML ne suffit pas, JavaScript joue un rôle important à cet égard. ; var str = Si vous aimez quelqu'un et restez amoureux, vous pouvez faire une sortie ensemble au début du printemps, profiter des lotus ensemble au milieu de l'été, regarder la lune ensemble à la lumière de l'automne et chercher des fleurs de prunier ensemble à la fin de l'hiver, sans fatigué, mais heureux, extraordinaire, mais ordinaire. Alors, il n’y aura aucun regret dans cette vie. ; window.onload = typage de fonction(){ var mydiv = document.getElementById(display); mydiv.innerHTML += str.charAt(i); var oBtn = document.getElementById('btn'); (en tapant,100); if(i==str.length){ clearTimeout(id) mydiv.value =; mydiv.innerHTML += //alert(Exécution du programme terminée !); } } </script> RésumerCe qui précède est l'outil de développement HTML5 pour la confession de la Reine présenté par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !