RESPONSIVE CIRCLE WITH TEXT IN HTML CSS

[{"selector":"#anim-b26dfaff-e03e-4a19-be09-a29bdc2aa89f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c3c9680b-e051-4392-9086-15bde7427aec","keyframes":{"transform":["translate3d(0px, -642.71632%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9906ce84-5f71-48f9-9c3f-8075199a971d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-566b65dc-7908-4d21-8597-1e12c7203901","keyframes":{"transform":["translate3d(0px, 171.34502%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

RESPONSIVE CIRCLE HTML

[{"selector":"#anim-22c224b2-a1af-45fa-a868-5676599706ce","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] <div class="res-circle"> <div class="circle-txt">Foo!</div> </div> 01

RESPONSIVE CIRCLE CSS

[{"selector":"#anim-f0170622-1111-49d1-8ca8-9c5c83c3a0e9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-180052ed-af4a-4d2c-af1a-a684d55b034b","keyframes":{"transform":["translate3d(-116.38795%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e8e0e4d7-e3ad-4e2b-a66d-c789ff341f7a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-03e9ec15-58c2-4e85-97b4-96c4819727dd","keyframes":{"transform":["translate3d(0px, 173.04045%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] .res-circle { PERCENTAGE WIDTH width: 20%; TURN INTO CIRCLE border-radius: 50%; BACKGROUND COLOR background: #bcd6ff; NECESSARY TO POSITION TEXT line-height: 0; position: relative; } 02 MATCH HEIGHT TO WIDTH .res-circle::after { content: ""; display: block; padding-bottom: 100%; }

CENTER TEXT CSS

[{"selector":"#anim-6a21fab9-09ab-4337-9710-f61a7d93b4b7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f945cb2-1738-4130-8eae-99998bea6158","keyframes":{"transform":["translate3d(124.04182%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] CENTER TEXT IN CIRCLE .circle-txt { position: absolute; bottom: 50%; width: 100%; text-align: center; } 03

FULL TUTORIAL

[{"selector":"#anim-04f23ae5-263b-4769-b2ce-bef9cecd16d1","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-24ee25df-12ff-46ed-91ac-1fb1c6fdbc7f","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-330f9807-00ec-4f88-aa5b-7f3da5305337","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]

RESPONSIVE CIRCLE WITH TEXT IN HTML CSS

RESPONSIVE CIRCLE HTML

RESPONSIVE CIRCLE CSS

CENTER TEXT CSS

FULL TUTORIAL

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST