<div class="heart__wrapper">
<div class="heart"></div>
</div>
.heart__wrapper {
background: #ed5d52;
width: 250px;
height: 250px;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
.heart {
top: 40%;
left: 35%;
width: 30%;
height: 30%;
background: white;
transform: rotate(45deg);
position: relative;
border-bottom-right-radius: 5px;
animation: breathing 5s infinite;
filter: drop-shadow(4px 4px 0 rgba(255, 255, 255, 0.4));
}
.heart:before,
.heart:after {
z-index: -1;
content: "";
width: 100%;
height: 100%;
background: white;
border-radius: 50px;
position: absolute;
}
.heart:before {
top: -50%;
}
.heart:after {
left: -50%;
}
@keyframes breathing {
/* 0% {
opacity: .4;
} */
40% {
opacity: .9;
transform: rotate(45deg) scale(1.1);
}
/* 100% {
opacity: .4;
} */
}
document.addEventListener('click', () => {
document.querySelector('.heart__wrapper').style['background'] = '#' + [1,2,3,4,5,6].map(() => {
return '1234567890abcdef'[Math.floor(Math.random() * 16)]
}).join('');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.