Πώς να δημιουργήσετε μια καρδιά που χτυπά με καθαρό CSS για τον βαλεντίνο σας

Κάθε χρόνο στις 14 Φεβρουαρίου, πολλοί άνθρωποι ανταλλάσσουν κάρτες, καραμέλες, δώρα ή λουλούδια με την ειδική «βαλεντίνη» τους. Η ημέρα του ρομαντισμού που ονομάζουμε Ημέρα του Αγίου Βαλεντίνου ονομάζεται για έναν Χριστιανό μάρτυρα και χρονολογείται από τον 5ο αιώνα, αλλά προέρχεται από τη ρωμαϊκή γιορτή Lupercalia.

Εντάξει, τόσο καλά. Αλλά τι μπορεί να κάνει ένας προγραμματιστής για τον Βαλεντίνο τους;

Η απάντησή μου είναι: χρησιμοποιήστε CSS και γίνετε δημιουργικοί!

Λατρεύω πραγματικά το CSS. Δεν είναι μια πραγματικά εξελιγμένη γλώσσα (δεν θεωρείται καν γλώσσα προγραμματισμού τις περισσότερες φορές). Αλλά με ορισμένους γεωμετρικούς, μαθηματικούς και ορισμένους βασικούς κανόνες CSS, μπορείτε να μετατρέψετε το πρόγραμμα περιήγησής σας σε καμβά της δημιουργικότητάς σας!

Ας ξεκινήσουμε λοιπόν. Πώς θα δημιουργήσετε μια καρδιά με καθαρή γεωμετρία;

Χρειάζεστε απλώς ένα τετράγωνο και δύο κύκλους. Σωστά?

Και μπορούμε να το σχεδιάσουμε με ένα μόνο στοιχείο, χάρη στα στοιχεία ψευδο ::afterκαι ::before. Μιλώντας για ψευδο στοιχεία, ::afterείναι ένα ψευδο στοιχείο που σας επιτρέπει να εισάγετε περιεχόμενο σε μια σελίδα από το CSS (χωρίς να χρειάζεται να είναι στο HTML). ::beforeείναι ακριβώς το ίδιο, μόνο εισάγει contentπριν από οποιοδήποτε άλλο περιεχόμενο στο HTML αντί για μετά.

Και για τα δύο ψευδο στοιχεία, το τελικό αποτέλεσμα δεν βρίσκεται στην πραγματικότητα στο DOM, αλλά εμφανίζεται στη σελίδα σαν να ήταν.

Ας δημιουργήσουμε λοιπόν την καρδιά μας.

.heart { background-color: red; display: inline-block; height: 50px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); position: absolute; left: 45%; top: 45%; width: 50px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; } .heart:before { top: -25px; left: 0; } .heart:after { left: 25px; top: 0; }

Μπορείτε εύκολα να παρατηρήσετε ότι ορίζουμε το τετράγωνο και τη θέση του χρησιμοποιώντας την κύρια κατηγορία «καρδιά» και τους δύο κύκλους με τα στοιχεία ψευδο ::beforeκαι ::after. Οι κύκλοι είναι στην πραγματικότητα μόλις 2 ακόμη τετράγωνα που έχουν ακτίνα περιγράμματος μειωμένα στο μισό.

Αλλά τι είναι μια καρδιά χωρίς να χτυπάς;

Ας δημιουργήσουμε έναν παλμό. Εδώ θα χρησιμοποιήσουμε τον κανόνα @keyframes. Το @keyframes CSS at-rule χρησιμοποιείται για τον καθορισμό της συμπεριφοράς ενός κύκλου μιας κίνησης CSS.

Όταν χρησιμοποιούμε τον κανόνα βασικών καρέ, μπορούμε να διαιρέσουμε μια χρονική περίοδο σε μικρότερα μέρη και να δημιουργήσουμε έναν μετασχηματισμό / κινούμενη εικόνα χωρίζοντάς την σε βήματα (κάθε βήμα αντιστοιχεί σε ποσοστό ολοκλήρωσης της χρονικής περιόδου).

Ας δημιουργήσουμε λοιπόν τον καρδιακό παλμό. Η κινούμενη εικόνα του καρδιακού παλμού αποτελείται από 3 βήματα:

@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }
  1. Στο 0% της χρονικής περιόδου ξεκινάμε χωρίς μετασχηματισμό.
  2. Στο 20% της χρονικής περιόδου κλιμακώνουμε το σχήμα μας στο 125% του αρχικού του μεγέθους.
  3. Στο 40% της χρονικής περιόδου κλιμακώνουμε το σχήμα μας στο 150% του αρχικού του μεγέθους.

Για το υπόλοιπο 60% της χρονικής περιόδου αφήνουμε χρόνο για να επιστρέψει η καρδιά μας στην αρχική της κατάσταση.

Τέλος, πρέπει να αναθέσουμε την κινούμενη εικόνα στην καρδιά μας.

.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }

Αυτό είναι!

Έχουμε μια καρδιά που χτυπάει για πάντα.

Ή ίσως όσο διαρκεί η αγάπη σου…

Μη διστάσετε να δείτε το σχετικό Codepen:

Σας εύχομαι μια υπέροχη ημέρα του Αγίου Βαλεντίνου!