| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
February 14, 2022 3:03 PM |
33 |
14 |
14 |
💚 Day 9️⃣0️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥 Today we going to design a heat shape with animation.
❓ What's the main logic behind it with the codepen link?
💡 Step by step!
#100DaysOfCode
#CodeNewbie
#webdev
Let me explain!🧵👇 pic.twitter.com/Mj6HUdXbwz
→ First of all, we have to draw a square. pic.twitter.com/FOvReWQDWn
→ Inside that container again we have to draw a square using "before "pseudo-elements.
- And set 50% as the value of the "left" property. pic.twitter.com/MKahPQPxOV
→ Again, inside that container again we have to draw a square using "after "pseudo-elements.
- And set the -50% as the value of the "top" property. pic.twitter.com/KEx5rckQa7
→ Then, we have to rotate the entire container using rotate function.
-
rotate to 45 degrees!
-
set the border-radius to 50% in both pseudo-elements.
-
Also, we have to set the same background color in all boxes. pic.twitter.com/tg9e6Ki56J
👀 Now for the animation!!
- This is the graph of a heartbeat! pic.twitter.com/SCzyhJUcdC
→ We have to scale our container using the scale function. pic.twitter.com/14mCAMdMOB
→ codepen link: