{"html":"

37%OFF

\n B\n L\n A\n C\n K \n F\n R\n I\n D\n A\n Y\n 🎉\n

\n The black friday is getting back with the deal of the year37% OFF\n on all products\n click here\n to get the discount.\n

\n 0001020304050607080910111213141516171819202122232425262728293031\n

day

\n :\n

\n 00010203040506070809101112131415161718192021222324\n

hour

\n :\n

\n 00010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960\n

min

\n :\n

\n 00010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960\n

sec

\n","css":"/*the style has written with Scss and*/\n/* files on my GitHub👾 check the pio*/\n\n.black-friday-component {\n --count: 0;\n --days: 31;\n --hours: 24;\n --minutes: 60;\n --seconds: 60;\n flex-direction: column;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n width: -moz-fit-content;\n width: fit-content;\n margin: auto;\n padding: 0 40px;\n}\n.black-friday-component .coupon {\n border-radius: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n border: 1px solid #654bff;\n scale: 0.7;\n transform-origin: bottom center;\n}\n.black-friday-component .coupon:hover .content h3 > span {\n animation: jump 0.15s ease-out 1 normal both;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(1) {\n animation-delay: 0.03s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(2) {\n animation-delay: 0.06s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(3) {\n animation-delay: 0.09s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(4) {\n animation-delay: 0.12s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(5) {\n animation-delay: 0.15s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(6) {\n animation-delay: 0.18s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(7) {\n animation-delay: 0.21s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(8) {\n animation-delay: 0.24s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(9) {\n animation-delay: 0.27s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(10) {\n animation-delay: 0.3s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(11) {\n animation-delay: 0.33s;\n}\n.black-friday-component .coupon:hover .content h3 > span:nth-of-type(12) {\n animation-delay: 0.36s;\n}\n.black-friday-component .coupon .box {\n height: 100%;\n width: 130px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 1rem;\n}\n.black-friday-component .coupon .box span {\n display: block;\n font-weight: bold;\n font-size: 1.8rem;\n}\n.black-friday-component .coupon .diver {\n display: block;\n width: 0px;\n height: 160px;\n border: 3px dashed transparent;\n border-right-color: #654bff;\n}\n.black-friday-component .coupon .content {\n padding: 1rem;\n flex: 1;\n color: #fff;\n width: 330px;\n height: 100%;\n}\n.black-friday-component .coupon .content h3 {\n font-weight: 600;\n font-size: 2rem;\n height: 34px;\n align-items: center;\n display: flex;\n justify-content: flex-start;\n margin-bottom: 1rem;\n}\n.black-friday-component .coupon .content h3 span.end {\n width: 30px;\n}\n.black-friday-component .coupon .content p {\n font-weight: 400;\n font-style: normal;\n color: #959595;\n font-size: 1rem;\n line-height: 1.25rem;\n}\n.black-friday-component .coupon .content p a {\n font-style: italic;\n color: #654bff;\n text-transform: capitalize;\n word-spacing: 0.03rem;\n font-weight: bolder;\n text-decoration: underline;\n text-underline-offset: 0.05rem;\n text-decoration-color: #654bff;\n}\n.black-friday-component .timer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: 0rem;\n overflow: hidden;\n width: calc(244px + 0rem);\n text-align: center;\n}\n.black-friday-component .timer .colon {\n width: 8px;\n color: #fff;\n font-size: 2rem;\n}\n.black-friday-component .timer .item {\n text-align: center;\n width: 55px;\n height: fit-content;\n}\n.black-friday-component .timer .item .days,\n.black-friday-component .timer .item .hours,\n.black-friday-component .timer .item .minutes,\n.black-friday-component .timer .item .seconds {\n text-align: center;\n width: 55px;\n overflow: hidden;\n height: 40px;\n}\n.black-friday-component .timer .item .day,\n.black-friday-component .timer .item .hour,\n.black-friday-component .timer .item .min,\n.black-friday-component .timer .item .sec {\n text-align: center;\n height: fit-content;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n}\n.black-friday-component .timer .item .day span,\n.black-friday-component .timer .item .hour span,\n.black-friday-component .timer .item .min span,\n.black-friday-component .timer .item .sec span {\n height: 40px;\n color: #fff;\n font-size: 2rem;\n display: inline-block;\n}\n.black-friday-component .timer .item .day {\n --count: var(--days);\n animation: slide calc(var(--count) * 86400s) ease-out 0s 31 normal both;\n}\n.black-friday-component .timer .item .hour {\n --count: var(--hours);\n animation: slide calc(var(--count) * 3600s) steps(var(--count)) 0s 24 normal\n both;\n}\n.black-friday-component .timer .item .min {\n --count: var(--minutes);\n animation: slide calc(var(--count) * 60s) steps(var(--count)) 0s 60 normal\n both;\n}\n.black-friday-component .timer .item .sec {\n --count: var(--seconds);\n animation: slide calc(var(--count) * 1s) steps(var(--count)) 0s 60 normal both;\n}\n.black-friday-component .timer .item p {\n text-align: center;\n color: #fff;\n font-size: 1.2rem;\n font-weight: 400;\n}\n\n@keyframes slide {\n 0% {\n transform: translateY(calc(-40px * var(--count)));\n }\n 99.6% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(calc(-40px * var(--count)));\n }\n}\n@keyframes jump {\n 0% {\n transform: translateY(0);\n scale: 1;\n }\n 50% {\n transform: translateY(-10px);\n scale: 1.1;\n }\n 100% {\n transform: translateY(0);\n scale: 1;\n }\n}\n"}

little-catfish-69

👁 实时预览

📝 源代码