Δημιουργήστε ένα κινούμενο κείμενο 3D Text

Feb 8, 2026

πως να

Χαμένη αγάπη από τον Καναδά Jam3 είναι ένα όμορφα σκοτεινό, κινητό-έτοιμο διαδραστικό ποίημα με πραγματική καρδιά για τα διαρκή συναισθήματα γύρω από την χαμένη αγάπη. ο Διάταξη ιστότοπου χτίστηκε χρησιμοποιώντας HTML5 με το Γέφυρα Η βιβλιοθήκη τροφοδοτεί την κινούμενη εικόνα του, ένα από τα πιο οπτικά εντυπωσιακά χαρακτηριστικά του είναι το κινούμενο 3D κείμενο που πραγματικά φέρνει την ποίηση της αγάπης Lost στη ζωή.

Κάνουν διαδραστικά αποτελέσματα 3D τυπογραφίας 3D

Φαίνεται εντυπωσιακό ως κόλαση, και δεν είναι δύσκολο να ενσωματωθεί στη δουλειά σας για να δημιουργήσετε μια εμπλοκή εμπειρία χρήστη ? Εδώ είναι πώς γίνεται.

Θέλετε να κάνετε τη δική σας τοποθεσία συμμετοχής; Δοκιμάστε ένα οικοδόμος ιστότοπου εργαλείο και κρατήστε τα πράγματα να τρέχουν ομαλά με τη συλλογή του σωστού web hosting υπηρεσία.

Love Lost's 3D text comes right out of the screen at the viewer — Το 3D κείμενο της Love Lost έρχεται ακριβώς έξω από την οθόνη στον θεατή

01. Ξεκινήστε το έγγραφο HTML

Το πρώτο βήμα είναι να ορίσετε τη δομή του εγγράφου HTML. Αυτό περιλαμβάνει το δοχείο HTML που ξεκινά το έγγραφο, το οποίο περιέχει τα τμήματα κεφαλής και σώματος. Ενώ το τμήμα κεφαλής χρησιμοποιείται κυρίως για τη φόρτωση του εξωτερικού αρχείου CSS, το τμήμα σώματος θα αποθηκεύσει το ορατό περιεχόμενο σελίδας που δημιουργήθηκε στο βήμα 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; τίτλος & gt; 3d κίνηση κειμένου & lt; / τίτλος & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; body & gt;
*** Βήμα 2 εδώ
& lt; / Body & GT;
& lt; / html & gt;

02. Ορατό Περιεχόμενο HTML

Το ορατό περιεχόμενο HTML αποτελείται από ένα δοχείο άρθρου που περιέχει το ορατό κείμενο. Το σημαντικό μέρος του εμπορευματοκιβωτίου του άρθρου είναι το χαρακτηριστικό «animate animate data-animate», η οποία θα αναφέρεται από το CSS για να εφαρμόσει τα οπτικά εφέ. Το κείμενο στο εσωτερικό του άρθρου γίνεται από μια ετικέτα H1 για να υποδείξει ότι το περιεχόμενο είναι ο κύριος τίτλος της σελίδας.

 & lt; άρθρο-animate animate = "μετακίνηση στο" & gt;
  & lt; h1 & gt; hello εκεί! & lt; / h1 & gt;
& lt; / άρθρο & gt;

03. Έναρξη CSS

Δημιουργήστε ένα νέο αρχείο που ονομάζεται 'Styles.css'. Το πρώτο σύνολο οδηγιών ορίζει το δοχείο HTML και το σώμα της σελίδας για να έχει ένα μαύρο φόντο, καθώς και χωρίς ορατό διάσωμα. Το λευκό ορίζεται επίσης ως το προεπιλεγμένο χρώμα κειμένου για όλα τα στοιχεία του παιδιού στη σελίδα για να κληρονομήσετε. Αποφυγή του προεπιλεγμένου μαύρου χρώματος του περιεχομένου παραγωγής κειμένου φαίνεται να είναι αόρατο.

 html, σώμα {
  Ιστορικό: # 000;
  Padding: 0;
  Περιθώριο: 0;
  Χρώμα: #FFF;
}

04. Δοχείο κινουμένων σχεδίων

Το δοχείο περιεχομένου που αναφέρεται με το χαρακτηριστικό "animate" Data-animate "έχει εφαρμοστεί συγκεκριμένα στυλ. Το μέγεθός του έχει οριστεί ώστε να ταιριάζει με το πλήρες μέγεθος της οθόνης χρησιμοποιώντας μονάδες μέτρησης VW και VH, καθώς και να περιστρέφονται ελαφρά. Μια κινούμενη εικόνα που ονομάζεται «κίνηση» εφαρμόζεται, η οποία θα διαρκέσει για μια διάρκεια 20 δευτερολέπτων και θα επαναληφθεί απείρως.

 [animate data-animate = "μετακίνηση"] {
  Θέση: συγγενής.
  Πλάτος: 100VW;
  Ύψος: 100VH;
  αδιαφάνεια: 1;
  Animation: Μετακίνηση 20s Infinite;
  Κείμενο-Ευθυγράμμιση: Κέντρο;
  Μετασχηματισμός: Περιστροφή (20deg);
}

05. Έναρξη κίνησης

Το κινούμενο σχέδιο "Beadin" που αναφέρεται στο προηγούμενο βήμα απαιτεί έναν ορισμό χρησιμοποιώντας @Keyframes. Το πρώτο πλαίσιο που ξεκινά από το 0% της κινούμενης εικόνας ρυθμίζει το προεπιλεγμένο μέγεθος γραμματοσειράς, την τοποθέτηση κειμένου και ορατή σκιά. Επιπλέον, το στοιχείο έχει ρυθμιστεί με μηδενική αδιαφάνεια, έτσι ώστε να είναι αρχικά αόρατο - δηλαδή. Εμφανίζεται εκτός προβολής.

 @keyframes mountin {
  0% {
  Μέγεθος γραμματοσειράς: 1em;
  Αριστερά: 0;
  αδιαφάνεια: 0;
  Κείμενο-σκιά: Κανένα;
  }
  *** Βήμα 6 εδώ
}

06. Ζωντανή στην προβολή

By using multiple shadows you can enhance the 3D effect — Χρησιμοποιώντας πολλαπλές σκιές μπορείτε να βελτιώσετε το εφέ 3D

Το επόμενο πλαίσιο τοποθετείται στο 10% μέσω της κινούμενης εικόνας. Αυτό το πλαίσιο ορίζει την αδιαφάνεια για την πλήρη ορατή, με αποτέλεσμα να κινηθεί σταδιακά το κείμενο. Επιπλέον, οι πολλαπλές σκιές προστίθενται με μπλε και μειώνουν τις τιμές χρώματος για να δώσουν τις ψευδαισθήσεις του τρισδιάστατου βάθους στο κείμενο.

 10%
{
  αδιαφάνεια: 1;
  Text-Shadow:
  .2em -.2em 4px #aaa,
  .4em -.4em 4px # 777,
  .6em -.6em 4px # 444,
  .8em -.8em 4px # 111;
}
*** Βήμα 7 εδώ

07. Ολοκλήρωση της κινούμενης εικόνας

Τα τελικά πλαίσια εμφανίζονται στο 80% και στο τέλος της κινούμενης εικόνας. Αυτά είναι υπεύθυνα για την αύξηση του μεγέθους της γραμματοσειράς και μετακινώντας το στοιχείο προς τα αριστερά. Οι νέες ρυθμίσεις εφαρμόζονται επίσης για τη σκιά κειμένου για να ζωντανεύουν προς την κατεύθυνση, ενώ επίσης εξασθενίζουν το κείμενο από τα πλαίσια 80% έως 100%.

80% {
  Μέγεθος γραμματοσειράς: 8em;
  Αριστερά: -8em;
  αδιαφάνεια: 1;
}
100% {
  Μέγεθος γραμματοσειράς: 10em;
  Αριστερά: -10em;
  αδιαφάνεια: 0;
  Text-Shadow:
  .02em -.02em 4px #aaa,
  .04em -.04em 4px # 777,
  .06em -.06em 4px # 444,
  .08em -.08em 4px # 111;
}
***

Σημείωση: Όποια και αν είναι το έργο που ξεκινάτε, έχοντας αποθήκευση σύννεφων που μπορεί να αντιμετωπίσει ότι είναι απαραίτητη (ο οδηγός μας θα βοηθήσει).

Αυτό το άρθρο δημοσιεύθηκε αρχικά σε εξέταση 273 του δημιουργικού σχεδιασμού Web Magazine Web Design. Αγοράζουν τεύχος 273 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

Δημιουργήστε ένα λαμπερό αποτέλεσμα κειμένου νέον
Πώς να εντοπίσετε το Web Animations
Δημιουργία ιστοριών για κινούμενα σχέδια ιστού

Δημιουργήστε ένα κινούμενο κείμενο 3D Text

01. Ξεκινήστε το έγγραφο HTML

02. Ορατό Περιεχόμενο HTML

03. Έναρξη CSS

04. Δοχείο κινουμένων σχεδίων

05. Έναρξη κίνησης

06. Ζωντανή στην προβολή

07. Ολοκλήρωση της κινούμενης εικόνας

πως να - Τα πιο δημοφιλή άρθρα

Πώς να χρησιμοποιήσετε εικόνες αναφοράς: 13 βασικές συμβουλές για καλλιτέχνες

Το μόνο που χρειάζεται να ξέρετε για τον κωδικό JavaScript Spliting

Δημιουργήστε εφέ κολάζ στο πρόγραμμα περιήγησης με CSS

Πώς να δημιουργήσετε ψηφιακά στοιχεία ενεργητικού

Δημιουργήστε εκπληκτικές μορφές πλακιδίων σε μπλέντερ

Ανάπτυξη δεξιοτήτων καρικατούρας

Κορυφαίες συμβουλές για γλυπτική ένα πλάσμα σε ZBrush

Δημιουργία εφέ πυρκαγιάς 3D

Κατηγορίες