여자친구를 위한 낭만적인 선물인 3D 사랑 애니메이션을 만드는 HTML5 튜토리얼

집

웹 프론트엔드

H5 튜토리얼

여자친구를 위한 낭만적인 선물인 3D 사랑 애니메이션을 만드는 HTML5 튜토리얼_html5 튜토리얼 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

프로그래머는 로맨틱할 줄 모른다고? 오늘은 발렌타인데이에 사랑하는 사람에게 선물할 HTML5와 CSS3를 사용하여 만든 3D 사랑 애니메이션을 보았습니다. . , 여전히 아주 좋습니다. 물론. 배경에 낭만적인 요소를 사용할 수 있습니다. 예를 들어, 여자친구의 아름다운 사진을 추가하세요. 저렴하면서도 의미있는 발렌타인데이 선물이 될 것입니다. DEMO를 클릭하여 살펴보실 수 있습니다. 먼저 렌더링:

구현 코드는 다음과 같습니다.

　html 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

<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>

　　这么多div, 主要是构造爱心的线条区域。

　　CSS代码：

CSS 코드复复内容到剪贴板

.heart3d {
위치: 절대;
상단: 0;
맞아맞아: 0;
하단하단: 0;
왼쪽: 0;
여백: 자동;
너비: 100px;
높이: 160px;
-webkit-transform-style: preserve-3d;
변환 스타일: preserve-3d;
-webkit-animation: 15초 무한 선형 회전;
애니메이션: 15초 무한 선형 회전;
}
.heart3d [class^="갈비뼈"] {
위치: 절대;
너비: 100px;
높이: 160px;
테두리: 단단함 #f22613;
테두리 너비: 1픽셀 1픽셀 0 0 ;
테두리-반경: 50% 50% 0 / 40% 50% 0;
}
.heart3d [class$="1"] {
-webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px);
변환: rotateY(10deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="2"] {
-webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);
변환: rotateY(20deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="3"] {
-webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);
변환: rotateY(30deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="4"] {
-webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);
변환: rotateY(40deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="5"] {
-webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);
변환: rotateY(50deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="6"] {
-webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);
변환: rotateY(60deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="7"] {
-webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);
변환: rotateY(70deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="8"] {
-webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);
변환: rotateY(80deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="9"] {
-webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);
변환: rotateY(90deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="10"] {
-webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);
변환: rotateY(100deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="11"] {
-webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);
변환: rotateY(110deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="12"] {
-webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);
변환: rotateY(120deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="13"] {
-webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);
변환: rotateY(130deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="14"] {
-webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);
변환: rotateY(140deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="15"] {
-webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);
변환: rotateY(150deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="16"] {
-webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);
변환: rotateY(160deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="17"] {
-webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);
변환: rotateY(170deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="18"] {
-webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);
변환: rotateY(180deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="19"] {
-webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);
변환: rotateY(190deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="20"] {
-webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);
변환: rotateY(200deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="21"] {
-webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);
변환: rotateY(210deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="22"] {
-webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);
변환: rotateY(220deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="23"] {
-webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);
변환: rotateY(230deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="24"] {
-webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);
변환: rotateY(240deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="25"] {
-webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);
변환: rotateY(250deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="26"] {
-webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);
변환: rotateY(260deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="27"] {
-webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);
변환: rotateY(270deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="28"] {
-webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);
변환: rotateY(280deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="29"] {
-webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);
변환: rotateY(290deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="30"] {
-webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);
변환: rotateY(300deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="31"] {
-webkit-transform: rotateY(310deg) rotateZ(45deg) translateX(30px);
변환: rotateY(310deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="32"] {
-webkit-transform: rotateY(320deg) rotateZ(45deg) translateX(30px);
변환: rotateY(320deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="33"] {
-webkit-transform: rotateY(330deg) rotateZ(45deg) translateX(30px);
변환: rotateY(330deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="34"] {
-webkit-transform: rotateY(340deg) rotateZ(45deg) translateX(30px);
변환: rotateY(340deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="35"] {
-webkit-transform: rotateY(350deg) rotateZ(45deg) translateX(30px);
변환: rotateY(350deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="36"] {
-webkit-transform: rotateY(360deg) rotateZ(45deg) translateX(30px);
변환: rotateY(360deg) rotateZ(45deg) translateX(30px);
}

　　对这些线条进行渲染, 以便其에는 3D적인 视觉效果가 있습니다.

　　然后定义了一组name称为spin적HTML5动画：

CSS 코드复复内容到剪贴板

@-webkit-keyframes spin {
~으로 {
-webkit-transform: rotateY(360deg) rotateX(360deg);
변환: rotateY(360deg) rotateX(360deg);
}
}
@keyframes 스핀 {
~으로 {
-webkit-transform: rotateY(360deg) rotateX(360deg);
변환: rotateY(360deg) rotateX(360deg);
}
}

위 내용은 HTML 코드와 CSS 코드로 구현한 3D 러브 애니메이션 효과입니다. 낭만청년들도 한번 배워보고 또 다른 우정의 기술을 배워보시길 바랍니다. 스크립트하우스에 더 좋은 글을 공유하도록 노력하겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7412

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다