{"html":"

\n Hello\n

\n \n

world !
coder !
users !
uiverse

","css":".container {\n width: 307px;\n height: 50px;\n}\n\n.content {\n display: block;\n position: sticky;\n overflow: hidden;\n font-family: 'Lato', sans-serif;\n font-size: 35px;\n line-height: 40px;\n color: #ecf0f1;\n}\n\n.content__container {\n font-weight: 600;\n overflow: hidden;\n height: 40px;\n padding: 0 40px;\n}\n\n.content__container:before {\n content: '[';\n left: 0;\n}\n\n.content__container:after {\n content: ']';\n position: absolute;\n right: 0;\n}\n\n.content__container:after, .content__container:before {\n position: absolute;\n top: -2px;\n color: #16a085;\n font-size: 42px;\n line-height: 40px;\n -webkit-animation-name: opacity;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n animation-name: opacity;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n\n.content__container__text {\n display: inline;\n float: left;\n margin: 0;\n}\n\n.content__container__list {\n margin-top: 0;\n padding-left: 110px;\n text-align: left;\n list-style: none;\n -webkit-animation-name: change;\n -webkit-animation-duration: 10s;\n -webkit-animation-iteration-count: infinite;\n animation-name: change;\n animation-duration: 10s;\n animation-iteration-count: infinite;\n}\n\n.content__container__list__item {\n line-height: 40px;\n margin: 0;\n}\n\n@keyframes opacity {\n 0%, 100% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes change {\n 0%, 12.66%, 100% {\n transform: translate3d(0, 0, 0);\n }\n\n 16.66%, 29.32% {\n transform: translate3d(0, -25%, 0);\n }\n\n 33.32%, 45.98% {\n transform: translate3d(0, -50%, 0);\n }\n\n 49.98%, 62.64% {\n transform: translate3d(0, -75%, 0);\n }\n\n 66.64%, 79.3% {\n transform: translate3d(0, -50%, 0);\n }\n\n 83.3%, 95.96% {\n transform: translate3d(0, -25%, 0);\n }\n}\n "}

quick-rattlesnake-57

👁 实时预览

📝 源代码