This project shows a simple digital Valentine's Day card. I created this project in order to practice my CSS skills, especially CSS animations.

Heart Styling

The heart is created using CSS only. It uses pseudo-elements :before and :after to create the two circles of the heart and the main div for the square part.

1.heart {
2  height: var(--heart-size);
3  width: var(--heart-size);
4  background: #f20044;
5  position: relative;
6  transform: rotate(-45deg);
7  box-shadow: -10px 10px 90px #f20044;
8  border-top-right-radius: 3px;
9  border-bottom-left-radius: 1px;
10  z-index: 1;
11}
12
13.heart:before {
14  content: "";
15  position: absolute;
16  height: var(--heart-size);
17  width: var(--heart-size);
18  background: #f20044;
19  top: -60%;
20  border-radius: var(--heart-border-radius);
21  box-shadow: -10px -10px 90px #f20044;
22}
23
24.heart:after {
25  content: "";
26  position: absolute;
27  height: var(--heart-size);
28  width: var(--heart-size);
29  background: #f20044;
30  right: -60%;
31  border-radius: var(--heart-border-radius);
32  box-shadow: 10px 10px 90px #f20044;
33  transition: transform 0.5s ease-in-out;
34}

Animations

The animations are used to make the heart scale and the arrow move. This gives the card a more dynamic feel.

1.animate-arrow {
2  animation: shoot-arrow 1s ease-out forwards;
3  opacity: 1;
4}
5
6@keyframes shoot-arrow {
7  0% {
8    transform: translate(100vw, 60vh) rotate(var(--arrow-rotation));
9    opacity: 1;
10  }
11  100% {
12    transform: translate(-50%, -45%) rotate(var(--arrow-rotation));
13    opacity: 1;
14  }
15}
16
17@keyframes scale-heart {
18  0% {
19    transform: rotate(-45deg) scale(1);
20  }
21  100% {
22    transform: rotate(-45deg) scale(var(--heart-scale));
23  }
24}
25
26.scale-heart {
27  animation: scale-heart 1s ease-in-out forwards;
28  animation-delay: 1s;
29}

You can try out the app yourself by clicking on the button. After being redirected, press the heart to view the app.