Știai că poți face asta folosind doar HTML & CSS?

Următorul cod HTML și CSS creează o animație interactivă cu o inimă care se rotește și se mărește, având și o umbra. Iată o scurtă explicație a codului:

  1. HTML:
    • Se definește o pagină HTML cu un element head care conține informații despre document (charset, viewport, titlu).
    • În interiorul elementului body, avem un singur element, <div>, care reprezintă inima (class="heart").
  2. CSS:
    • Se definește un fundal pentru întreaga pagină (body) și se centrează conținutul pe ecran.
    • Elementul cu clasa .heart este stilizat pentru a avea o formă de inimă și este rotit cu -45deg pentru un aspect plăcut.
    • Se adaugă o umbră albă în fundal pentru a oferi inimii un aspect tridimensional.
    • Folosește @keyframes pentru a defini o animație numită rotateAndZoom care rotește și mărește inima în timp.
    • La final, inima este poziționată și setată la dimensiunea inițială.

Această animație este activată când deschizi pagina, iar inima începe să se rotească și să se mărească, oferind un efect vizual atrăgător. Este un exemplu simplu de cum poți crea animații interactive utilizând doar HTML și CSS.

Pune acest cod într-un Notepad și salvează-l cu extensia .html (heart.html), da dublu click și vezi în browser rezultatul.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Rotating and Zooming Heart with Shadow</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #28292b;
}

.heart {
width: 100px;
height: 100px;
background-color: #f10420;
position: relative;
transform: rotate(-45deg);
margin-bottom: 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
animation: rotateAndZoom 10s forwards;
box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.7); /* White Shadow */
}

.heart::before,
.heart::after {
content: “”;
width: 100px;
height: 100px;
background-color: #f10420;
position: absolute;
border-radius: 50%;
}

.heart::before {
top: -50px;
left: 0;
}

.heart::after {
top: 0;
left: 50px;
}

@keyframes rotateAndZoom {
0% {
transform: rotate(-45deg) scale(1);
}
50% {
transform: rotate(315deg) scale(3.3); /* Increased zoom level */
}
100% {
transform: rotate(675deg) scale(1); /* Rotate back and reset zoom */
}
}

</style>
</head>
<body>
<!– Example 7: Heart Shape –>
<div class=”heart”></div>
</body>
</html>