렌더링은 다음과 같습니다.
3월 8일 여왕의 날 고백 유물 개발에 사용된 지식 포인트: css33D 장면, 3D 변형, 사랑 만들기 기술, 3D 큐브 만들기 기술, 사용자 정의 애니메이션, 기본 js DOM 노드 작업, 루프 등
: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 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 너비=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; 중심 중심; 변환 스타일: 보존-3d; 애니메이션: 15초 무한 선형 회전 } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left :100px;top:100px;} .heart3d [class^=rib] { 위치: 절대; 높이: 160px; 테두리: 단색 #f22613; 테두리 너비: 1px 1px 0 0; 테두리 반경: 50% 50% 0 / 40% 50% 0 } .heart3d [class$=1] { 변환: 회전Y(10deg) 회전 (45도) 번역X(30px) } .heart3d [class$=2] { 변환:rotateY(20deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=3] { 변환:rotateY(30deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=4] { 변환:rotateY(40deg)rotateZ(45deg)translateX(30px) } .heart3d; [class$=5] { 변환:rotateY(50deg)rotateZ(45deg)translateX(30px); } .heart3d [class$=6] {변형:rotateY(60deg)rotateZ(45deg)translateX(30px); [class$=7] { 변환:rotateY(70deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=8] { 변환:rotateY(80deg)rotateZ(45deg)translateX(30px); } .heart3d[class$=9]{변환:rotateY(90deg)rotateZ(45deg)translateX(30px); .heart3d [class$=10] { 변환:rotateY(100deg)rotateZ(45deg) translateX(30px); } .heart3d [class$=11] { 변환:rotateY(110deg)rotateZ(45deg)translateX(30px); } .heart3d [class$=12] {변형:rotateY(120deg)rotateZ(45deg) 번역X(30px); } .heart3d [class$=13] { 변환: rotateY(130deg)rotateZ(45deg)translateX(30px); } .heart3d [class$=14] { 변환:rotateY(140deg)rotateZ(45deg)translateX(30px); rotateY(150deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=16] { 변환:rotateY(160deg)rotateZ(45deg)translateX(30px) } .heart3d[class$=17]{변환:rotateY(170deg)rotateZ(45deg)translateX(30px); .heart3d [class$=18] { 변환:rotateY(180deg)rotateZ(45deg) translateX(30px); } .heart3d [class$=19] { 변환:rotateY(190deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=20] {변환:rotateY(200deg)rotateZ(45deg) 번역X(30px); } .heart3d [class$=21] { 변환: rotateY(210deg)rotateZ(45deg)translateX(30px); } .heart3d [class$=22] { 변환:rotateY(220deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=23] { -webkit -변환:rotateY(230deg)rotateZ(45deg)translateX(30px); 변환:rotateY(230deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=24] { 변환:rotateY(240deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=25] { 변환:rotateY(250deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=26] { 변환:rotateY(260deg)rotateZ(45deg)translateX(30px); } .heart3d[class$=27]{변형:rotateY(270deg)rotateZ(45deg)translateX(30px); .heart3d [class$=28] { 변환:rotateY(280deg)rotateZ(45deg) translateX(30px); } .heart3d [class$=29] { 변환:rotateY(290deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=30] {변환:rotateY(300deg)rotateZ(45deg) 번역X(30px) } .heart3d [class$=31] { 변환: rotateY(310deg)rotateZ(45deg)translateX(30px); } .heart3d [class$=32] { 변환:rotateY(320deg)rotateZ(45deg)translateX(30px) } .heart3d [class$=33] {변형: 회전Y(330도) 회전Z(45도) 번역X(30px) } .heart3d [class$=34] { 변환:rotateY(340deg)rotateZ(45deg)translateX(30px); } .heart3d[class$=35]{변환:rotateY(350deg)rotateZ(45deg)translateX(30px); .heart3d [class$=36] { 변환:rotateY(360deg)rotateZ(45deg) translateX(30px); } @keyframes spin { to { 변환:rotateY(360deg)rotateX(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; 변환:translateZ(30px)rotateX(-90deg);} .img:nth-child(3){top:0px ;왼쪽:-50px;변환-원점:오른쪽; 변환:translateZ(30px)rotateY(-90deg);} .img:nth-child(4){top:0px;left:50px;transform-origin:left; 변환:translateZ(30px)rotateY(90deg);} .img:nth-child(6){top:0px; 왼쪽:0;변환:번역Z(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.innerHTML += //alert(프로그램 실행 완료!) } } </script> 요약위 내용은 에디터가 소개한 Queen's Day 고백용 HTML5 개발툴입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!