| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
February 3, 2022 7:28 AM |
24 |
15 |
8 |
💚 Day 7️⃣9️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥Today we are going to design a phone call with this awesome wavy animation.
❓ What's the main logic behind it with the codepen link?
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#webdev
Let me explain!🧵👇 pic.twitter.com/qeal3BoYkb
1️⃣ This is a simple code of HTML! pic.twitter.com/qfuLr8snnK
2️⃣ Then, we have designed the container of the call icon. pic.twitter.com/zLS6CULbcP
3️⃣ Now, wavy circles are designed by pseudo-elements.
-
All properties are the same for both pseudo-elements but we have to change the "animation-delay" in one of them.
-
Do not forget to set "0" as the value of the scale function. pic.twitter.com/cDXVbyti2R
4️⃣ Now, we have to set the "animation delay" in any of them. pic.twitter.com/qKuHQfVIbj
5️⃣ Finally, we have to set the keyframes.
-
at 0% → set "0" as the value of the scale function.
-
at 100% → set "2" as the value of the scale function.
-
Do not forget to set "0" as the value of "opacity" at 100%! pic.twitter.com/EnVW22YwQK
→ codepen link: