{"html":"

\n\t

\n\t\t\n\t

\n\t

What did you think
of this post?

\t\t\t\t\n\t

\n\t\t

\n\t\t\t\n\t\t\t\t123\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\t\t

\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t4\n\t\t\t\n\t\t

\n\t

","css":".like-dislike-container {\n --dark-grey: #353535;\n --middle-grey: #767676;\n --lightest-grey: linear-gradient(#fafafa,#ebebeb);\n --shadow: 0 5px 15px 0 #00000026;\n --shadow-active: 0 5px 5px 0 #00000026;\n --border-radius-main: 10px;\n --border-radius-icon: 50px;\n position: relative;\n display: flex;\n text-align: center;\n flex-direction: column;\n align-items: center;\n cursor: default;\n color: var(--dark-grey);\n opacity: .9;\n margin: auto;\n padding: 1.5rem;\n font-weight: 600;\n background: var(--lightest-grey);\n max-width: max-content;\n border-radius: var(--border-radius-main);\n box-shadow: var(--shadow);\n transition: .2s ease all;\n}\n\n.like-dislike-container:hover {\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .tool-box {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n top: 0;\n right: 0;\n border-radius: var(--border-radius-main);\n}\n\n.like-dislike-container .btn-close {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: .8rem;\n height: .8rem;\n color: transparent;\n font-size: 0;\n cursor: pointer;\n background-color: #ff000080;\n border: none;\n border-radius: var(--border-radius-main);\n transition: .2s ease all;\n}\n\n.like-dislike-container .btn-close:hover {\n width: 1rem;\n height: 1rem;\n font-size: 1rem;\n color: #ffffff;\n background-color: #ff0000cc;\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .btn-close:active {\n width: .9rem;\n height: .9rem;\n font-size: .9rem;\n color: #ffffffde;\n --shadow-btn-close: 0 3px 3px 0 #00000026;\n box-shadow: var(--shadow-btn-close);\n}\n\n.like-dislike-container .text-content {\n margin-bottom: 1rem;\n font-size: 18px;\n line-height: 1.6;\n cursor: default;\n}\n\n.like-dislike-container .icons-box {\n display: flex;\n}\n\n.like-dislike-container .icons {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: .6;\n margin: 0 0.5rem;\n cursor: pointer;\n user-select: none;\n border: 1px solid var(--middle-grey);\n border-radius: var(--border-radius-icon);\n transition: .2s ease all;\n}\n\n.like-dislike-container .icons:hover {\n opacity: .9;\n box-shadow: var(--shadow);\n}\n\n.like-dislike-container .icons:active {\n opacity: .9;\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .icons .btn-label {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 0.5rem;\n cursor: pointer;\n position: relative;\n}\n\n.like-dislike-container .like-text-content {\n border-right: 0.1rem solid var(--dark-grey);\n padding: 0 0.6rem 0 0.5rem;\n pointer-events: none;\n}\n\n.like-dislike-container .dislike-text-content {\n border-left: 0.1rem solid var(--dark-grey);\n padding: 0 0.5rem 0 0.6rem;\n pointer-events: none;\n}\n\n.like-dislike-container .icons .svgs {\n width: 1.3rem;\n fill: #000000;\n box-sizing: content-box;\n padding: 10px 10px;\n transition: .2s ease all;\n}\n\n/* Hide the default checkbox */\n.like-dislike-container .icons .input-box {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.like-dislike-container .icons #icon-like-regular {\n display: block;\n}\n\n.like-dislike-container .icons #icon-like-solid {\n display: none;\n}\n\n.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {\n animation: rotate-icon-like 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {\n display: none;\n animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {\n display: block;\n animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #icon-dislike-regular {\n display: block;\n transform: rotate(180deg);\n}\n\n.like-dislike-container .icons #icon-dislike-solid {\n display: none;\n transform: rotate(180deg);\n}\n\n.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {\n animation: rotate-icon-dislike 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {\n display: none;\n animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {\n display: block;\n animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons .fireworks {\n transform: scale(0.4);\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n right: 40px;\n border-radius: 50%;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n left: 40px;\n border-radius: 50%;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n/* Shake Animation */\n@keyframes rotate-icon-like {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(3deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-3deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}\n\n@keyframes rotate-icon-dislike {\n 0% {\n transform: rotate(180deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(183deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(177deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(181deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(180deg) translate3d(0, 0, 0);\n }\n}\n\n/* Checked Animation */\n@keyframes checked-icon-like {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(-10deg);\n }\n}\n\n@keyframes checked-icon-dislike {\n 0% {\n transform: scale(0) rotate(180deg);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(170deg);\n }\n}\n\n/* Fireworks Animation */\n@keyframes fireworks-position {\n 0%, 19.9% {\n margin-top: 10%;\n margin-left: 40%;\n }\n\n 20%, 39.9% {\n margin-top: 40%;\n margin-left: 30%;\n }\n\n 40%, 59.9% {\n margin-top: 20%;\n margin-left: 70%;\n }\n\n 60%, 79.9% {\n margin-top: 30%;\n margin-left: 20%;\n }\n\n 80%, 99.9% {\n margin-top: 30%;\n margin-left: 80%;\n }\n}\n\n@keyframes fireworks-gravity {\n to {\n transform: translateY(200px);\n opacity: 0;\n }\n}\n\n@keyframes fireworks-bang {\n to {\n box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;\n }\n}"}

sweet-liger-88

👁 实时预览

📝 源代码

🔗 相关联的样式