Rendernya adalah sebagai berikut:
Poin pengetahuan yang digunakan dalam mengembangkan Artefak Pengakuan Dosa Hari Ratu 8 Maret: adegan css33D, transformasi 3D, keterampilan membuat cinta, keterampilan membuat kubus 3D, animasi khusus, operasi node js DOM asli, loop, dll.
:point_down:kode 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 lebar=50 tinggi=50 src=images/1.jpg /></div> <div class=img><img lebar=50 tinggi=50 src=gambar/2.jpg /></div> <div class=img><img lebar=50 tinggi=50 src=gambar/3.jpg /></div> <div kelas= img><img lebar=50 tinggi=50 src=gambar/4.jpg /></div> <div class=img><img lebar=50 tinggi=50 src=images/5.jpg /></div> <div class=img><img lebar=50 tinggi=50 src=images/6.jpg /></div> </div> </div>
:point_down:kode css:
<style>/*Css style sheet lemari pakaian*/ *{margin:0px;padding:0px;}/*Hapus margin luar default dan margin dalam*/ body{background:#000;} .heart3d { position: absolute; 0; kanan: 0; bawah: 0; kiri: 0; margin: otomatis; gaya transformasi: pelestarian-3d; animasi: putaran 15 detik linier tak terbatas; } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;kiri :100px;top:100px;} .heart3d [kelas^=tulang rusuk] { posisi: absolut; lebar: 100px tinggi: 160px; batas: padat #f22613; lebar batas: 1px 1px 0 0; radius batas: 50% 50% 0 / 40% 50% 0; (45 derajat) terjemahanX(30 piksel); } .heart3d [kelas$=2] { transformasi: putarY(20 derajat) putarZ(45 derajat) terjemahanX(30 piksel); } .heart3d [kelas$=3] { transformasi: putarY(30 derajat) putarZ(45 derajat) terjemahanX(30 piksel); { transformasi: putarY(40 derajat) putarZ(45 derajat) terjemahanX(30 piksel); [kelas$=5] { transformasi: putarY(50 derajat) putarZ(45 derajat) terjemahanX(30 piksel); } .heart3d [kelas$=6] { transformasi: putarY(60 derajat) putarZ(45 derajat) terjemahanX(30 piksel); [kelas$=7] { transformasi: putarY(70 derajat) putarZ(45 derajat) terjemahanX(30 piksel); .heart3d [kelas$=8] { transformasi: putarY(80 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); } .hati3d [kelas$=9] { transformasi: putarY(90 derajat) putarZ(45 derajat) terjemahanX(30 piksel); .heart3d [kelas$=10] { transformasi: putarY(100 derajat) putarZ(45 derajat) TranslateX(30px); } .heart3d [kelas$=11] { transformasi: memutarY(110deg) memutarZ(45deg) menerjemahkanX(30px); TranslateX(30px); } .heart3d [kelas$=13] { transformasi: putarY(130 derajat) putarZ(45 derajat) terjemahanX(30 piksel); } .heart3d [kelas$=14] { transformasi: putarY(140 derajat) putarZ(45 derajat) terjemahanX(30 piksel); putarY(150 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); .heart3d [kelas$=16] { transformasi: putarY(160 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); } .hati3d [kelas$=17] { transformasi: putarY(170 derajat) putarZ(45 derajat) terjemahanX(30 piksel); .heart3d [kelas$=18] { transformasi: putarY(180 derajat) putarZ(45 derajat) TranslateX(30px); } .heart3d [kelas$=19] { transformasi: memutarY(190deg) memutarZ(45deg) menerjemahkanX(30px); TranslateX(30px); } .heart3d [kelas$=21] { transformasi: putarY(210 derajat) putarZ(45 derajat) terjemahanX(30 piksel); } .heart3d [kelas$=22] { transformasi: putarY(220 derajat) putarZ(45 derajat) terjemahanX(30 piksel); -transformasi: putarY(230 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); transformasi: putarY(230 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); } .heart3d [kelas$=24] { transformasi: putarY(240 derajat) putarZ(45 derajat) terjemahanX(30 piksel); transformasi: putarY(250 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); .heart3d [kelas$=26] { transformasi: putarY(260 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); } .hati3d [kelas$=27] { transformasi: putarY(270 derajat) putarZ(45 derajat) terjemahanX(30 piksel } .heart3d [kelas$=28] { transformasi: putarY(280 derajat) putarZ(45 derajat) TranslateX(30px); } .heart3d [kelas$=29] { transformasi: memutarY(290deg) memutarZ(45deg) menerjemahkanX(30px); TranslateX(30px); } .heart3d [kelas$=31] { transformasi: putarY(310 derajat) putarZ(45 derajat) terjemahanX(30 piksel); } .heart3d [kelas$=32] { transformasi: putarY(320 derajat) putarZ(45 derajat) terjemahanX(30 piksel); putarY(330 derajat) putarZ(45 derajat) terjemahkanX(30 piksel); .heart3d [kelas$=34] { transformasi: memutarY(340deg) memutarZ(45deg) menerjemahkanX(30px); } .heart3d [kelas$=35] { mengubah: memutarY(350deg) memutarZ(45deg) menerjemahkanX(30px } .heart3d [kelas$=36] { transformasi: putarY(360 derajat) putarZ(45 derajat) TranslateX(30px); } @keyframes spin { ke { transform: memutarY(360deg) memutarX(360deg) } .per{ lebar:50px;tinggi:50px;posisi:mutlak;atas:0;kiri:0;kanan: 0;bawah:0; margin:otomatis;gaya transformasi: melestarikan-3d;perspektif:800px } .img{width:50px;height:50px;position:absolute;backface-visibility:hidden; } .img:nth-child(1){top:-50px;left:0;transform-origin:bottom; (30px) putarX(90 derajat);} .img:anak ke-n(2){top:50px;kiri:0;transform-origin:top; transform:translateZ(30px) rotasiX(-90deg);} .img:anak ke-n(3){top:0px ;kiri:-50px;transformasi-asal:kanan; transformasi:translateZ(30px) putarY(-90deg);} .img:anak ke-n(4){top:0px;kiri:50px;transform-origin:kiri; transform:translateZ(30px) putarY(90deg);} .img:anak ke-n(6){top:0px; kiri:0;transformasi:translateZ(30px);} .img:anak ke-n(5){top:0px;kiri:0;transform:translateZ(0px);} </style>:point_down:kode javascript:
<script> var i = 0; var str1 = Bagi seorang pembuat halaman web pasti sudah tidak asing lagi dengan bahasa HTML, karena bahasa HTML merupakan dasar dari semua produksi halaman web. Namun jika halaman tersebut nyaman digunakan oleh netizen, ramah dan murah hati, bahkan seperti aplikasi desktop, maka hanya mengandalkan bahasa HTML saja tidak cukup, JavaScript memainkan peran penting dalam hal ini. ; var str = Jika kamu mencintai seseorang dan tetap jatuh cinta, kamu bisa pergi jalan-jalan bersama di awal musim semi, menikmati bunga teratai bersama di pertengahan musim panas, melihat bulan bersama di musim gugur yang cerah, dan mencari bunga plum bersama di akhir musim dingin, tanpa harus pergi ke mana pun. bosan, tapi bahagia, luar biasa, tapi biasa saja. Maka tidak akan ada penyesalan dalam hidup ini. ; window.onload = fungsi mengetik(){ var mydiv = document.getElementById(display); mydiv.innerHTML += str.charAt(i); var oBtn = document.getElementById('btn'); (mengetik,100); if(i==str.length){ clearTimeout(id); mydiv.innerHTML += //alert(Eksekusi program selesai!); MeringkaskanDi atas adalah alat pengembangan HTML5 untuk pengakuan Hari Ratu yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!