CSS & JavaScript Animation Effects Html CSS Animated Heart
CSS & JavaScript Animation Effects. Html CSS Animated Heart.
Source Code:
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>Hearts| Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
document.addEventListener('mousemove', function(e){
let body = document.querySelector('body');
let heart = document.createElement('span');
let x = e.offsetX;
let y = e.offsetY;
heart.style.left = x+'px';
heart.style.top = y+'px';
let size = Math.random() * 80;
heart.style.width = 20 + size+'px';
heart.style.height = 20 + size+'px';
let transformValue = Math.random() * 360;
heart.style.transform = 'rotate('+ transformValue +'deg)';
body.appendChild(heart);
setTimeout(function(){
heart.remove();
}, 1000)
})
</script>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
min-height: 10evh;
background: #111;
overflow: hidden;
}
span{
position: absolute;
pointer-events: none;
filter: drop-shadow(0 0 15px rgba (0,0,0,0.5));
animation: fadeInOut 1s linear infinite;
}
@keyframes fadeInOut
{
0%, 100%
{
opacity: 0;
}
20%,80%
{
opacity: 1;
}
}
span::before
{
content: "";
position: absolute;
width: 100px;
height: 100px;
background: url("https://technewsidea.com/wp-content/uploads/2022/03/heart.png");
background-size: cover;
animation: moveShape 1s linear infinite;
}
@keyframes moveShape
{
0%{
transform: translate(0) rotate(0deg);
}
100%{
transform: translate(300px) rotate(360deg);
}
}Find More Amazing projects here.
Your Queries:
