HTML5 개발 고백 아티팩트 구현 코드
어제는 3월 8일 여신의 날이었습니다. 이 글에서는 주로 html5 개발 고백 도구의 구현 코드를 공유합니다. 이 날에도 이를 사용하여 사랑을 표현할 수 있습니다. 3월 8일 여왕의 날 고백 유물 개발에 사용된 지식 포인트: css33D 장면, 3D 변형, 사랑 만들기 기술, 3D 큐브 만들기 기술, 사용자 정의 애니메이션, 기본 js DOM 노드 작업, 루프 등
렌더링은 다음과 같습니다:
:point_down:html 코드:
<p id="display"> </p> <p class='heart3d'> <p class='rib1'></p> <p class='rib2'></p> <p class='rib3'></p> <p class='rib4'></p> <p class='rib5'></p> <p class='rib6'></p> <p class='rib7'></p> <p class='rib8'></p> <p class='rib9'></p> <p class='rib10'></p> <p class='rib11'></p> <p class='rib12'></p> <p class='rib13'></p> <p class='rib14'></p> <p class='rib15'></p> <p class='rib16'></p> <p class='rib17'></p> <p class='rib18'></p> <p class='rib19'></p> <p class='rib20'></p> <p class='rib21'></p> <p class='rib22'></p> <p class='rib23'></p> <p class='rib24'></p> <p class='rib25'></p> <p class='rib26'></p> <p class='rib27'></p> <p class='rib28'></p> <p class='rib29'></p> <p class='rib30'></p> <p class='rib31'></p> <p class='rib32'></p> <p class='rib33'></p> <p class='rib34'></p> <p class='rib35'></p> <p class='rib36'></p> <p class="per"> <p class="img"><img width="50" height="50" src="images/1.jpg" /></p> <p class="img"><img width="50" height="50" src="images/2.jpg" /></p> <p class="img"><img width="50" height="50" src="images/3.jpg" /></p> <p class="img"><img width="50" height="50" src="images/4.jpg" /></p> <p class="img"><img width="50" height="50" src="images/5.jpg" /></p> <p class="img"><img width="50" height="50" src="images/6.jpg" /></p> </p> </p>
:point_down:css 코드:
<style>/*css样式表的衣柜*/
*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
body{background:#000;}
.heart3d {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 160px;
transform-origin:center center center;
transform-style: preserve-3d;
animation: spin 15s 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:자바스크립트 코드:
<script>
var i = 0;
var str1 = "对于一个网页制作者来说，对HTML语言一定不会感到陌生，因为HTML语言是所有网页制作的基础。但是如果页面能够方便网友们的使用，友好而大方，甚至像桌面应用程序一样，那么仅仅依靠HTML语言是不够的，JavaScript在这其中扮演着重要的角色。";
var str ="如果，爱一个人，守一份爱情，可以在早春一起去踏青，可以在盛夏一起去赏荷，可以在浅秋一起去观月，可以在深冬一起去寻梅，不厌倦，却欢乐，不平凡，却平淡。那么，此生便无憾了。";
window.onload = function typing(){
var myp = document.getElementById("display");
myp.innerHTML += str.charAt(i);
var oBtn = document.getElementById('btn');
i++;
var id = setTimeout(typing,100);
if(i==str.length){
clearTimeout(id);
myp.value ="";
myp.innerHTML +=""
//alert("程序执行完毕！");
}
}
</script>
관련 추천:
프로그래머의 고백 아티팩트 "520" Shout Out, 520 Shout Out_PHP Tutorial
위 내용은 HTML5 개발 고백 아티팩트 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Stock Market GPT
더 현명한 결정을 위한 AI 기반 투자 연구
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
html5에서 서버에 대한 이벤트 (SSE)를 사용하는 방법은 무엇입니까?
Sep 21, 2025 am 06:11 AM
sseenablestreal time, 단일 방향, 단방향-클라이언트 updatesviahttp; useeventsourceinjavaScriptToConnect, handlemessageswithonmessage, setServerResponsetypeToText/event-stream, formatdatawith "data :"및 "\ n \ n", andoptionallycluventidsf
HTML5에서 접근성을 위해 ARIA 역할을 사용하는 방법은 무엇입니까?
Sep 21, 2025 am 04:41 AM
AriaEnhancesWebAccessibilityAddingsmanticalminingtolementwhtmlisInsoldicity.useariaroleslikerole = "button", aria-expanded, andaria-labelforcustomcomponentsordynamiccontent, butalwaysprefernativehtmlementsbuttonav.update
HTML5의 접근성 초점을 관리하는 방법은 무엇입니까?
Sep 21, 2025 am 05:27 AM
useemantichtmlelementsLikeAndFornativeFocusableandKeyboardsUpport.EnsUreLogicalTabOderAndVisibleFocusIndicatorsviacs.fogrammanageFocusIndynamicContentLikEmodalSusingElement.focus (), TrappingFocusInsideAndingItaFterClosterA
html5에서 요소를 올바르게 사용하는 방법은 무엇입니까?
Sep 17, 2025 am 06:33 AM
thetimeElementInhtml5representsDates 및 entermanccessibilityandseo; usetHeTeTimeattriptiRipITO-formattedValuestOprovidesEmanticmaning, 특히 human-extordurations, 특히 연속적인 주도적 인용 비대를 확보합니다
HTML5에서 정규 표현에 대해 양식 필드를 검증하는 방법은 무엇입니까?
Sep 22, 2025 am 05:11 AM
USETHEPATTERNATTRIBITINHINHTML5INPUTELENTEDATEAGAINSTAREGEX, SALSFORPASSWORDSREQUIRINGNUMBERS, 대문자, 소문자 및 MINIUMINGENGTH;
HTML5에서 모바일 장치의 뷰포트를 설정하는 방법은 무엇입니까?
Sep 16, 2025 am 02:28 AM
뷰포트 메타 태그를 추가하면 모바일 장치에 웹 페이지가 올바르게 표시되도록하여 브라우저가 기본적으로 데스크톱 너비로 렌더링하고 페이지가 줄어들지 않습니다.
HTML5 문서에서 SVG 경로를 애니메이션하는 방법은 무엇입니까?
Sep 21, 2025 am 01:58 AM
USECSSSTROKE-DASHARRAYANDSTROKE-DASHOFFSETFORSIMPLEDRAWINIGANIMATIONS; 2.ApplyJavaScriptFordyNamicTriggersLikEloadorScroll; 3.employLibraries-gsApforPathmorphing; 4.OptimizeperFormanceByLimitingConcurrentAnimations.
SVG 파일을 HTML5 문서에 직접 포함시키는 방법은 무엇입니까?
Sep 17, 2025 am 04:49 AM
SVG를 직접 포함 시키려면 SVG 코드를 HTML 태그에 삽입하여 XML 선언을 제거하십시오. 2. SVG 컨텐츠를 복사하여 원이 포함 된 예제와 같은 HTML에 붙여 넣습니다. 3. 장점에는 CSS 스타일 제어, JavaScript 작업, HTTP 요청 감소 및 반응 형 지원이 포함됩니다. 4. 중복 속성을 정리하고 필요한 네임 스페이스를 유지할 수 있습니다.
