การเรนเดอร์มีดังนี้:
คะแนนความรู้ที่ใช้ในการพัฒนาสิ่งประดิษฐ์คำสารภาพวันราชินีวันที่ 8 มีนาคม: ฉาก css33D, การแปลง 3 มิติ, ทักษะการสร้างความรัก, ทักษะการสร้างคิวบ์ 3 มิติ, แอนิเมชั่นแบบกำหนดเอง, การทำงานของโหนด DOM js แบบเนทีฟ, ลูป ฯลฯ
:point_down: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= '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= '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= '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= 'rib36'></div> <div class=per> <div class=img><img width=50 height=50 src=images/1.jpg /></div> <div class=img><img ความกว้าง=50 ความสูง=50 src=images/2.jpg /></div> <div class=img><img ความกว้าง=50 ความสูง=50 src=images/3.jpg /></div> <div class= img><img ความกว้าง=50 ความสูง=50 src=images/4.jpg /></div> <div class=img><img ความกว้าง=50 ความสูง=50 src=images/5.jpg /></div> <div class=img><img width=50 height=50 src=images/6.jpg /></div> </div> </div>
:point_down:โค้ด css:
<style>/*ตู้เสื้อผ้าสไตล์ Css*/ *{margin:0px;padding:0px;}/*ลบระยะขอบด้านนอกและระยะขอบด้านในที่เป็นค่าเริ่มต้น*/ body{พื้นหลัง:#000;} .heart3d { ตำแหน่ง: สัมบูรณ์; 0; ขวา: 0; ด้านล่าง: 0; ระยะขอบ: อัตโนมัติ; ความกว้าง: 100px; รูปแบบการแปลง: Preserve-3d; ภาพเคลื่อนไหว: หมุน 15s เชิงเส้นไม่มีที่สิ้นสุด; } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left :100px;top:100px;} .heart3d [class^=rib] { ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100px; 160px; border: solid #f22613; border-width: 1px 1px 0 0; เส้นขอบรัศมี: 50% 50% 0 / 40% 50% 0; } .heart3d [class$=1] { (45deg) แปลX(30px); } .heart3d [class$=2] { แปลงร่าง: หมุนY(20deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=3] { แปลงร่าง: หมุนY(30deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=4] { แปลง: หมุน Y (40 องศา) หมุน Z (45 องศา) แปล X (30px); } .heart3d [class$=5] { แปลงร่าง: หมุนY(50deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=6] { แปลงร่าง: หมุนY(60deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=7] { แปลง: หมุนY(70deg) หมุนZ(45deg) แปลX(30px); .heart3d [class$=8] { แปลงร่าง: หมุน Y (80deg) หมุน Z (45deg) แปล X (30px); } .heart3d [class$=10] { แปลง: หมุนY(100deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=11] { แปลงร่าง: หมุนY(110deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=12] { แปลงร่าง: หมุนY(120deg) หมุนZ(45deg) แปล X (30px); } .heart3d [class $ = 13] { แปลง: หมุนY(130deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=14] { แปลงร่าง: หมุนY(140deg) หมุนZ(45deg) แปลX(30px); หมุนY(150deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=16] { แปลงร่าง: หมุนY(160deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=17] { แปลงร่าง: หมุนY(170deg) หมุนZ(45deg) แปลX(30px); .heart3d [class$=18] { แปลง: หมุนY(180deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=19] { แปลงร่าง: หมุนY(190deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=20] { แปลงร่าง: หมุนY(200deg) หมุนZ(45deg) แปล X (30px); } .heart3d [class $ = 21] { แปลง: หมุนY(210deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=22] { แปลง: หมุนY(220deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=23] { -webkit - แปลง: หมุน Y (230 องศา) หมุน Z (45 องศา) แปล X (30px); แปลงร่าง: หมุนY(230deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=24] { แปลง: หมุนY(240deg) หมุนZ(45deg) แปลX(30px); แปลงร่าง: หมุนY(250deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=26] { แปลงร่าง: หมุน Y (260deg) หมุน Z (45deg) แปล X (30px); } .heart3d [class$=28] { แปลง: หมุนY(280deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=29] { แปลงร่าง: หมุนY(290deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=30] { แปลงร่าง: หมุนY(300deg) หมุนZ(45deg) แปล X (30px); } .heart3d [class $ = 31] { แปลง: หมุนY (310deg) หมุนZ (45deg) แปล X (30px); } .heart3d [class$=32] { แปลงร่าง: หมุน Y (320deg) แปล X (30px); หมุนY(330deg) หมุนZ(45deg) แปลX(30px); } .heart3d [class$=34] { แปลงร่าง: หมุน Y (340deg) หมุนZ (45deg) แปล X (30px); } .heart3d [class$=36] { แปลง: หมุนY(360deg) หมุนZ(45deg) แปลX(30px); } @keyframes หมุน { ถึง { แปลง: หมุนY(360deg) หมุนX(360deg); } .per{ width:50px;height:50px;position:absolute;top:0;left:0;right: 0;ด้านล่าง:0; ระยะขอบ:อัตโนมัติ;เปลี่ยนรูปแบบ: รักษา-3d;มุมมอง:800px; .img{width:50px;height:50px;position:absolute;backface-visibility:hidden; } .img:nth-child(1){top:-50px;left:0;transform-origin:bottom; (30px) หมุนX(90deg);} .img:nth-child(2){top:50px;left:0;transform-origin:top; ;ซ้าย:-50px;เปลี่ยนต้นกำเนิด:ขวา; แปลง:translateZ(30px) หมุนY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; ซ้าย:0;แปลง:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:โค้ดจาวาสคริปต์:
<script> var i = 0; var str1 = สำหรับผู้สร้างหน้าเว็บ ภาษา HTML จะต้องไม่คุ้นเคย เนื่องจากภาษา HTML เป็นพื้นฐานสำหรับการผลิตหน้าเว็บทั้งหมด แต่หากเพจนี้ทำให้ชาวเน็ตใช้งานได้สะดวก เป็นมิตร และใจกว้าง เหมือนกับแอปพลิเคชันบนเดสก์ท็อปแล้ว การใช้ภาษา HTML เพียงอย่างเดียวนั้นไม่เพียงพอ JavaScript ก็มีบทบาทสำคัญในเรื่องนี้ ; var str = หากคุณรักใครสักคนและยังคงรักอยู่สามารถไปเที่ยวด้วยกันในต้นฤดูใบไม้ผลิ เพลิดเพลินกับดอกบัวในช่วงกลางฤดูร้อน ดูดวงจันทร์ด้วยกันในฤดูใบไม้ร่วงที่สดใส และมองหาดอกบ๊วยด้วยกันในช่วงปลายฤดูหนาวโดยไม่ได้รับ เหนื่อยกับมัน แต่มีความสุข ไม่ธรรมดา แต่ธรรมดา แล้วจะไม่มีความเสียใจในชีวิตนี้ ; window.onload = การพิมพ์ฟังก์ชัน(){ var mydiv = document.getElementById(display); mydiv.innerHTML += str.charAt(i); var oBtn = document.getElementById('btn'); (พิมพ์ 100); if(i==str.length){ clearTimeout(id); mydiv.value =; mydiv.innerHTML += //alert(การทำงานของโปรแกรมเสร็จสมบูรณ์!); สรุปด้านบนนี้เป็นเครื่องมือพัฒนา HTML5 สำหรับคำสารภาพวัน Queen's Day ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความไว้ให้ฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!