Html5 development of the Queen's day confession artifact, html5

Html5 development of the Queen's day confession artifact, html5

As follows:

 

 

Develop the knowledge points used by the confession arms of the Queen's Day: css33D scenes, 3D transformations, love production techniques, 3D cube production techniques, custom animations, native Javascript DOM node operations, loops, and so on.

: 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"></div>                <div class="img"></div>                <div class="img"></div>                <div class="img"></div>                <div class="img"></div>                <div class="img"></div>            </div>        </div>

: Point_down: css code:

<Style>/* css style sheet wardrobe */* {margin: 0px; padding: 0px;}/* remove the default margin and padding */body {background: #000 ;}. heart3d {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 160px; transform-origin: center; transform-style: preserve-3d; animation: spin 15 s infinite linear;} # display {width: 200px; color: white; font-size: 24px; white-space: normal; text-indent: 55px; position: absolute; left: 100px; top: 100px ;}. heart3d [class ^ = "rib"] {position: absolute; width: 100px; height: 160px; border: solid # f22613; border-width: 1px 1px 0 0; border-radius: 50% 50% 0/40% 50% 0 ;}. heart3d [class $ = "1"] {transform: rotateY (10deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "2"] {transform: rotateY (20deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "3"] {transform: rotateY (30deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "4"] {transform: rotateY (40deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "5"] {transform: rotateY (50deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "6"] {transform: rotateY (60deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "7"] {transform: rotateY (70deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "8"] {transform: rotateY (80deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "9"] {transform: rotateY (90deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "10"] {transform: rotateY (100deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "11"] {transform: rotateY (110deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "12"] {transform: rotateY (120deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "13"] {transform: rotateY (130deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "14"] {transform: rotateY (140deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "15"] {transform: rotateY (150deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "16"] {transform: rotateY (160deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "17"] {transform: rotateY (170deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "18"] {transform: rotateY (180deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "19"] {transform: rotateY (190deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "20"] {transform: rotateY (200deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "21"] {transform: rotateY (210deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "22"] {transform: rotateY (220deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "23"] {-webkit-transform: rotateY (230deg) rotateZ (45deg) translateX (30px); transform: rotateY (230deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "24"] {transform: rotateY (240deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "25"] {transform: rotateY (250deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "26"] {transform: rotateY (260deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "27"] {transform: rotateY (270deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "28"] {transform: rotateY (280deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "29"] {transform: rotateY (290deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "30"] {transform: rotateY (300deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "31"] {transform: rotateY (310deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "32"] {transform: rotateY (320deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "33"] {transform: rotateY (330deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "34"] {transform: rotateY (340deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "35"] {transform: rotateY (350deg) rotateZ (45deg) translateX (30px );}. heart3d [class $ = "36"] {transform: rotateY (360deg) rotateZ (45deg) translateX (30px) ;}@ keyframes spin {to {transform: rotateY (360deg) rotateX (360deg );}}. per {width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 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) rotateX (-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) rotateY (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 = "for a Web page maker, the HTML language is certainly not unfamiliar, because the HTML language is the basis for making all web pages. However, if pages are user-friendly, generous, or even similar to desktop applications, it is not enough to rely solely on the HTML language, where JavaScript plays an important role. "; Var str =" if you love someone and keep your love, you can go to the Spring Festival together, enjoy the lotus in the midsummer, or go to the moon in the early autumn, or go to the Spring Festival to find the Plum in the late winter, not tired, but happy, not ordinary, but dull. So there will be no regrets in this life. "; Window. onload = function typing () {var mydiv = document. getElementById ("display"); mydiv. innerHTML + = str. charAt (I); var oBtn = document. getElementById ('btn '); I ++; var id = setTimeout (typing, 100); if (I = str. length) {clearTimeout (id); mydiv. value = ""; mydiv. innerHTML + = "" // alert ("the program has been executed! ") ;}}</Script>

Summary

The above is a small part of the html5 development of the Queen's day confession artifact, I hope to help you, if you have any questions, please leave a message, the small part will reply to you in a timely manner. Thank you very much for your support for the help House website!