Een gecodeerd hartje voor Valentijn

Stuur je Valentijn een gecodeerd hartje

Heb jij een nieuwe vlam, of iemand op het oog die net zo van coderen houdt als jij? Dan hebben wij iets leuks voor je. Stuur je Valentijn een gecodeerd roze bonzend hartje. How cute.

 
Gebruik de onderstaande code om jouw Valentijn te verassen:
<div class=”heart love1″></div>
<div class=”heart love2″></div>
 
html, body{
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
background: #f7f7f5;
}
.heart{
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before, .heart:after{
position: absolute;
content: “”;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #f1c5cf;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after{
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.love1{
animation: heart-animation 1s linear .4s infinite;
}
.love2{
animation: beating .5s linear infinite alternate;
}
.love1:after, .love1:before{
background-color: #ff7693;
}
@keyframes beating{
0%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
@keyframes heart-animation{
46%{
transform: scale(1);
}
50%{
transform: scale(1.3);
}
52%{
transform: scale(1.5);
}
55%{
transform: scale(3);
}
100%{
opacity: 0;
transform: scale(50);
}
}
 
Succes ermee!