Valentine's Card

Repository

I created this project to ask a person I'm interested in for a Valentine's Day date. However, it also helped me a lot to expand my CSS knowledge, especially in the area of CSS animations.

Heart in CSS

This here is a CSS class which creates a heart shape using only CSS. For this effect I use the pseudo classes :before and :after which then are applied to a empty HTML div in order to be rendered on the website.

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 in CSS

Here I have created two simple animations in CSS. One animation is needed to shoot an arrow through the heart and the other animation is used to finally scale the heart and show a small letter.

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}

Live Demonstration

Live Demo

Here you can view the Valentine's card. In order to start the animation, you have to click on the heart.