Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend H5-Tutorial HTML5-Tutorial zum Erstellen einer 3D-Liebesanimation, ein romantisches Geschenk für Ihre Freundin_HTML5-Tutorial-Fähigkeiten

HTML5-Tutorial zum Erstellen einer 3D-Liebesanimation, ein romantisches Geschenk für Ihre Freundin_HTML5-Tutorial-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:47 PM

Wer sagt, dass Programmierer nicht wissen, wie man romantisch ist? Heute habe ich auf einer ausländischen Website eine 3D-Liebesanimation gesehen, die ich meiner Liebsten zum Valentinstag schenken würde . , immer noch sehr gut. Natürlich. Wir können einige romantische Elemente im Hintergrund verwenden. Fügen Sie zum Beispiel schöne Fotos Ihrer Freundin hinzu. Dies ist ein preiswertes und dennoch bedeutungsvolles Geschenk zum Valentinstag. Sie können auf die DEMO klicken, um einen Blick darauf zu werfen. Zuerst die Renderings:

Der Implementierungscode lautet wie folgt:

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <div class='heart3d'>  
  2. <div class='rib1′ >div>  
  3. <div class='rib2′ >div>  
  4. <div class='rib3′ >div>  
  5. <div class='rib4′ >div>  
  6. <div class='rib5′ >div>  
  7. <div class='rib6′ >div>  
  8. <div class='rib7′ >div>  
  9. <div class='rib8′ >div>  
  10. <div class='rib9′ >div>  
  11. <div class='rib10′ >div>  
  12. <div class='rib11′ >div>  
  13. <div class='rib12′ >div>  
  14. <div class='rib13′ >div>  
  15. <div class='rib14′ >div>  
  16. <div class='rib15′ >div>  
  17. <div class='rib16′ >div>  
  18. <div class='rib17′ >div>  
  19. <div class='rib18′ >div>  
  20. <div class='rib19′ >div>  
  21. <div class='rib20′ >div>  
  22. <div class='rib21′ >div>  
  23. <div class='rib22′ >div>  
  24. <div class='rib23′ >div>  
  25. <div class='rib24′ >div>  
  26. <div class='rib25′ >div>  
  27. <div class='rib26′ >div>  
  28. <div class='rib27′ >div>  
  29. <div class='rib28′ >div>  
  30. <div class='rib29′ >div>  
  31. <div class='rib30′ >div>  
  32. <div class='rib31′ >div>  
  33. <div class='rib32′ >div>  
  34. <div class='rib33′ >div>  
  35. <div class='rib34′ >div>  
  36. <div class='rib35′ >div>  
  37. <div class='rib36′ >div>  
  38. div>  

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

　　CSS代码：

CSS-Code复制内容到剪贴板
  1. .heart3d {   
  2.   Position: absolut;   
  3.   oben: 0;   
  4.   richtigrichtig: 0;   
  5.   untenunten: 0;   
  6.   links: 0;   
  7.   Marge: automatisch;   
  8.   Breite: 100px;   
  9.   Höhe: 160px;   
  10.   -webkit-transform-style: preserve-3d;   
  11.   transform-style: preserve-3d;   
  12.   -webkit-animation: 15s unendlich linear drehen;   
  13.   Animation: 15 s unendlich linear drehen;   
  14. }   
  15. .heart3d [class^="rib"] {   
  16.   Position: absolut;   
  17.   Breite: 100px;   
  18.   Höhe: 160px;   
  19.   Rand: fest #f22613;   
  20.   Rahmenbreite: 1px 1px 0 0 ;   
  21.   Grenze-Radius: 50 % 50 % 0 / 40 % 50 % 0;   
  22. }   
  23. .heart3d [class$="1"] {   
  24.   -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  25.   transform: rotateY(10deg) rotateZ(45deg) translateX(30px);   
  26. }   
  27. .heart3d [class$="2"] {   
  28.   -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  29.   transform: rotateY(20deg) rotateZ(45deg) translateX(30px);   
  30. }   
  31. .heart3d [class$="3"] {   
  32.   -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  33.   transform: rotateY(30deg) rotateZ(45deg) translateX(30px);   
  34. }  
  35. .heart3d [class$="4"] {   
  36.   -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  37.   transform: rotateY(40deg) rotateZ(45deg) translateX(30px);   
  38. }   
  39. .heart3d [class$="5"] {   
  40.   -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  41.   transform: rotateY(50deg) rotateZ(45deg) translateX(30px);   
  42. }   
  43. .heart3d [class$="6"] {   
  44.   -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  45.   transform: rotateY(60deg) rotateZ(45deg) translateX(30px);   
  46. }   
  47. .heart3d [class$="7"] {   
  48.   -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  49.   transform: rotateY(70deg) rotateZ(45deg) translateX(30px);   
  50. }   
  51. .heart3d [class$="8"] {   
  52.   -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  53.   transform: rotateY(80deg) rotateZ(45deg) translateX(30px);   
  54. }   
  55. .heart3d [class$="9"] {   
  56.   -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  57.   transform: rotateY(90deg) rotateZ(45deg) translateX(30px);   
  58. }   
  59. .heart3d [class$="10"] {   
  60.   -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  61.   transform: rotateY(100deg) rotateZ(45deg) translateX(30px);   
  62. }   
  63. .heart3d [class$="11"] {   
  64.   -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  65.   transform: rotateY(110deg) rotateZ(45deg) translateX(30px);   
  66. }   
  67. .heart3d [class$="12"] {   
  68.   -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  69.   transform: rotateY(120deg) rotateZ(45deg) translateX(30px);   
  70. }  
  71. .heart3d [class$="13"] {   
  72.   -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  73.   transform: rotateY(130deg) rotateZ(45deg) translateX(30px);   
  74. }   
  75. .heart3d [class$="14"] {   
  76.   -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  77.   transform: rotateY(140deg) rotateZ(45deg) translateX(30px);   
  78. }   
  79. .heart3d [class$="15"] {   
  80.   -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  81.   transform: rotateY(150deg) rotateZ(45deg) translateX(30px);   
  82. }   
  83. .heart3d [class$="16"] {   
  84.   -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  85.   transform: rotateY(160deg) rotateZ(45deg) translateX(30px);   
  86. }   
  87. .heart3d [class$="17"] {   
  88.   -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  89.   transform: rotateY(170deg) rotateZ(45deg) translateX(30px);   
  90. }   
  91. .heart3d [class$="18"] {   
  92.   -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  93.   transform: rotateY(180deg) rotateZ(45deg) translateX(30px);   
  94. }   
  95. .heart3d [class$="19"] {   
  96.   -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  97.   transform: rotateY(190deg) rotateZ(45deg) translateX(30px);   
  98. }   
  99. .heart3d [class$="20"] {   
  100.   -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  101.   transform: rotateY(200deg) rotateZ(45deg) translateX(30px);   
  102. }   
  103. .heart3d [class$="21"] {   
  104.   -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  105.   transform: rotateY(210deg) rotateZ(45deg) translateX(30px);   
  106. }  
  107. .heart3d [class$="22"] {   
  108.   -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  109.   transform: rotateY(220deg) rotateZ(45deg) translateX(30px);   
  110. }   
  111. .heart3d [class$="23"] {   
  112.   -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  113.   transform: rotateY(230deg) rotateZ(45deg) translateX(30px);   
  114. }   
  115. .heart3d [class$="24"] {   
  116.   -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  117.   transform: rotateY(240deg) rotateZ(45deg) translateX(30px);   
  118. }   
  119. .heart3d [class$="25"] {   
  120.   -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  121.   transform: rotateY(250deg) rotateZ(45deg) translateX(30px);   
  122. }   
  123. .heart3d [class$="26"] {   
  124.   -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  125.   transform: rotateY(260deg) rotateZ(45deg) translateX(30px);   
  126. }   
  127. .heart3d [class$="27"] {   
  128.   -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  129.   transform: rotateY(270deg) rotateZ(45deg) translateX(30px);   
  130. }   
  131. .heart3d [class$="28"] {   
  132.   -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  133.   transform: rotateY(280deg) rotateZ(45deg) translateX(30px);   
  134. }   
  135. .heart3d [class$="29"] {   
  136.   -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  137.   transform: rotateY(290deg) rotateZ(45deg) translateX(30px);   
  138. }   
  139. .heart3d [class$="30"] {   
  140.   -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  141.   transform: rotateY(300deg) rotateZ(45deg) translateX(30px);   
  142. }  
  143. .heart3d [class$="31"] {   
  144.   -webkit-transform : rotateY(310deg) rotateZ(45deg) translateX(30px);   
  145.   transformer : rotateY(310deg) rotateZ(45deg) translateX(30px);   
  146. }   
  147. .heart3d [class$="32"] {   
  148.   -webkit-transform : rotateY(320deg) rotateZ(45deg) translateX(30px);   
  149.   transformer : rotateY(320deg) rotateZ(45deg) translateX(30px);   
  150. }   
  151. .heart3d [class$="33"] {   
  152.   -webkit-transform : rotateY(330deg) rotateZ(45deg) translateX(30px);   
  153.   transformer : rotateY(330deg) rotateZ(45deg) translateX(30px);   
  154. }   
  155. .heart3d [class$="34"] {   
  156.   -webkit-transform : rotateY(340deg) rotateZ(45deg) translateX(30px);   
  157.   transformer : rotateY(340deg) rotateZ(45deg) translateX(30px);   
  158. }   
  159. .heart3d [class$="35"] {   
  160.   -webkit-transform : rotateY(350deg) rotateZ(45deg) translateX(30px);   
  161.   transformer : rotateY(350deg) rotateZ(45deg) translateX(30px);   
  162. }   
  163. .heart3d [class$="36"] {   
  164.   -webkit-transform : rotateY(360deg) rotateZ(45deg) translateX(30px);   
  165.   transformer : rotateY(360deg) rotateZ(45deg) translateX(30px);   
  166. }  

　　对这些线条进行渲染，以便其有3D的视觉效果。

　　然后定义了一组名称为spin的HTML5动画：

Code CSS复制内容到剪贴板
  1. @-webkit-keyframes spin {   
  2.   à {   
  3.     -webkit-transform : rotateY(360deg) rotateX(360deg);   
  4.     transformation : rotateY(360deg) rotateX(360deg);   
  5.   }   
  6. }   
  7.   
  8. @keyframes spin {   
  9.   à {   
  10.     -webkit-transform : rotateY(360deg) rotateX(360deg);   
  11.     transformation : rotateY(360deg) rotateX(360deg);   
  12.   }   
  13. }  

Ce qui précède est l'effet d'animation d'amour 3D obtenu par le code HTML et le code CSS. Les jeunes hommes romantiques peuvent essayer de l'apprendre et acquérir une autre compétence d'amitié. Merci d'avoir lu, j'espère que cela pourra aider tout le monde. à Script House. Nous essaierons de partager d’autres excellents articles.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
2 Wochen vor By DDD
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?
7467
15
CakePHP-Tutorial
1376
52
Wie lautet das Format des Kontonamens von Steam?
77
11
Win11 -Aktivierungsschlüssel dauerhaft
48
19
NYT -Verbindungen Hinweise und Antworten
19
20
Mehr anzeigen
Related knowledge
Wie verwende ich Ansichtsfenster -Meta -Tags, um die Seite zu steuern, die auf mobilen Geräten skaliert wird? Wie verwende ich Ansichtsfenster -Meta -Tags, um die Seite zu steuern, die auf mobilen Geräten skaliert wird? Mar 13, 2025 pm 08:00 PM

In dem Artikel werden die Meta-Tags mit Ansichtsfenster besprochen, um die Seite zu steuern, die auf mobilen Geräten skaliert und sich auf Einstellungen wie Breite und initiale Maßstäbe für optimale Reaktionsfähigkeit und Leistung konzentriert.Character Count: 159

So führen Sie das H5 -Projekt aus So führen Sie das H5 -Projekt aus Apr 06, 2025 pm 12:21 PM

Ausführen des H5 -Projekts erfordert die folgenden Schritte: Installation der erforderlichen Tools wie Webserver, Node.js, Entwicklungstools usw. Erstellen Sie eine Entwicklungsumgebung, erstellen Sie Projektordner, initialisieren Sie Projekte und schreiben Sie Code. Starten Sie den Entwicklungsserver und führen Sie den Befehl mit der Befehlszeile aus. Vorschau des Projekts in Ihrem Browser und geben Sie die Entwicklungsserver -URL ein. Veröffentlichen Sie Projekte, optimieren Sie Code, stellen Sie Projekte bereit und richten Sie die Webserverkonfiguration ein.

Wie gehe ich mit der Privatsphäre und Berechtigungen des Benutzer Ort mit der Geolocation -API um? Wie gehe ich mit der Privatsphäre und Berechtigungen des Benutzer Ort mit der Geolocation -API um? Mar 18, 2025 pm 02:16 PM

In dem Artikel wird die Verwaltung der Privatsphäre und Berechtigungen des Benutzerstandorts mithilfe der Geolocation -API erörtert, wobei die Best Practices für die Anforderung von Berechtigungen, die Gewährleistung der Datensicherheit und die Einhaltung der Datenschutzgesetze hervorgehoben werden.

Wie benutze ich die API der HTML5 -Seite Sichtbarkeit, um zu erkennen, wann eine Seite sichtbar ist? Wie benutze ich die API der HTML5 -Seite Sichtbarkeit, um zu erkennen, wann eine Seite sichtbar ist? Mar 13, 2025 pm 07:51 PM

In dem Artikel werden die Sichtbarkeits -API der HTML5 -Seite mit der Sichtbarkeit von Seiten ermittelt, die Benutzererfahrung verbessert und die Ressourcennutzung optimiert. Zu den wichtigsten Aspekten gehören die Pause, die Verringerung der CPU -Last und die Verwaltung von Analysen auf der Grundlage von Sichtbarkeitsänderungen.

Wie verwende ich die HTML5 -Drag & Drop -API für interaktive Benutzeroberflächen? Wie verwende ich die HTML5 -Drag & Drop -API für interaktive Benutzeroberflächen? Mar 18, 2025 pm 02:17 PM

In dem Artikel wird erläutert, wie die HTML5 -Drag & Drop -API verwendet wird, um interaktive Benutzeroberflächen zu erstellen, Schritte zu detaillieren, um Elemente draggierbar zu machen, Schlüsselereignisse zu verarbeiten und Benutzererfahrung mit benutzerdefiniertem Feedback zu verbessern. Es wird auch gemeinsame Fallstricke zu a diskutiert

Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Apr 05, 2025 pm 11:27 PM

Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.

Was genau bedeutet H5 -Seitenproduktion? Was genau bedeutet H5 -Seitenproduktion? Apr 06, 2025 am 07:18 AM

Die Produktion von H5-Seiten bezieht sich auf die Erstellung von plattformübergreifenden kompatiblen Webseiten unter Verwendung von Technologien wie HTML5, CSS3 und JavaScript. Sein Kern liegt im Parsingcode des Browsers, der Struktur-, Stil- und interaktive Funktionen macht. Zu den allgemeinen Technologien gehören Animationseffekte, reaktionsschnelles Design und Dateninteraktion. Um Fehler zu vermeiden, sollten Entwickler debuggen werden. Leistungsoptimierung und Best Practices umfassen Bildformatoptimierung, Anforderungsreduzierung und Codespezifikationen usw., um die Ladegeschwindigkeit und die Codequalität zu verbessern.

Wie verwende ich die HTML5 WebSockets -API für die bidirektionale Kommunikation zwischen Client und Server? Wie verwende ich die HTML5 WebSockets -API für die bidirektionale Kommunikation zwischen Client und Server? Mar 12, 2025 pm 03:20 PM

In diesem Artikel werden die HTML5 WebSockets-API für die Kommunikation zwischen bidirektionaler Client-Server in Echtzeit erläutert. Es werden clientseitige (JavaScript) und serverseitige (Python/Flask) -implementierungen beschrieben, die Herausforderungen wie Skalierbarkeit, staatliches Management, ein

See all articles