Favorite Animation

Developer
Kyle Lavery
Size
3,530 Kb
Views
32,384
  1. Favorite Animation Previews
  2. Favorite Animation HTML Codes
  3. Favorite Animation CSS Codes
  4. Favorite Animation JS Codes

How do I make an favorite animation?

When, clicked the heart grows slightly and lines burst from the background.Based on this Dribbble shot: https://dribbble.com/shots/2469787-Favorite-Animation. What is a favorite animation? How do you make a favorite animation? This script and codes were developed by Kyle Lavery on 26 August 2022, Friday.

Favorite Animation Previews
IQ Test

Favorite Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Favorite Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card"> <div class="bar"> <div class="love action"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="heart"></div> </div> <div class="send action"></div> <div class="more action"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Favorite Animation - Script Codes CSS Codes

body { background: #08F7E9; min-height: 100vh; margin: 0; overflow: hidden;
}
.card { width: 75vw; height: 80vh; background: #F4F4F4; border-bottom-left-radius: 8vh; position: absolute; right: 0;
}
.card .bar { background: #FFF; height: 25vh; width: 100%; border-bottom-left-radius: 8vh; position: absolute; bottom: 0;
}
.action { height: 18vh; width: 18vh; margin: auto; position: absolute; top: 0; bottom: 0;
}
.love { left: 15vw;
}
.send { background: url("https://cbwconline.com/IMG/Codepen/Send-Grey.svg") center/contain no-repeat; left: 40vw;
}
.more { background: url("https://cbwconline.com/IMG/Codepen/More-Grey.svg") center/contain no-repeat; left: 65vw;
}
.line { margin: 9vh;
}
.line:nth-of-type(1) { transform: rotate(0deg);
}
.line:nth-of-type(2) { transform: rotate(45deg);
}
.line:nth-of-type(3) { transform: rotate(90deg);
}
.line:nth-of-type(4) { transform: rotate(135deg);
}
.line:nth-of-type(5) { transform: rotate(180deg);
}
.line:nth-of-type(6) { transform: rotate(225deg);
}
.line:nth-of-type(7) { transform: rotate(270deg);
}
.line:nth-of-type(8) { transform: rotate(315deg);
}
.line.active:before { content: ''; height: 9vh; width: 0.4vh; background: red; position: absolute; top: -4.5vh; left: -0.18vh; will-change: top, height; animation: line1 .3s ease-out 1;
}
.heart { background-color: #D5D4D4; width: 9vh; height: 9vh; margin: auto; position: absolute; top: 2.25vh; bottom: 0; left: 0; right: 0; transform: rotate(-45deg);
}
.heart:before, .heart:after { content: ''; width: 9vh; height: 9vh; border-radius: 50%; background-color: #D5D4D4; position: absolute;
}
.heart:before { top: -4.5vh; left: 0;
}
.heart:after { top: 0; left: 4.5vh;
}
.heart.love { background: #F80808;
}
.heart.love:before, .heart.love:after { background: #F80808;
}
.heart.active { animation: grow-shrink .3s ease 1;
}
@keyframes line1 { 0% { opacity: 1; } 25% { top: -4.5vh; } 65% { height: 9vh; } 100% { height: 0.36vh; top: -18vh; }
}
@keyframes grow-shrink { 40% { transform: scale(1.1) rotate(-45deg); } 75% { transform: scale(0.9) rotate(-45deg); } 100% { transform: scale(1) rotate(-45deg); }
}

Favorite Animation - Script Codes JS Codes

$(".love").click(function(){ $('.heart').toggleClass('love'); $('.line, .heart').addClass("active").delay(300).queue(function(next){ $('.line, .heart').removeClass("active"); next(); });
});
Favorite Animation - Script Codes
Favorite Animation - Script Codes
Home Page Home
Developer Kyle Lavery
Username koenigsegg1
Uploaded August 26, 2022
Rating 4.5
Size 3,530 Kb
Views 32,384
Do you need developer help for Favorite Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Lavery (koenigsegg1) Script Codes
Name
Dominant Color Lazy Loading
Responsive Flex Layout With Tabs - Material Design
Social Share Button
Vintage Neon Sign
Header Navigation Menu
Button
Minimal Material Design Form Input
Idea
Flexbox Google Play Music Website
CSS Design Awards Button In CSS
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!