{"html":"

\n \n \n \n\n

\n\n

\n","css":"/* Specific styles for .container */\n.container {\n background: #e8e8e8 none repeat scroll 0 0;\n color: #999;\n font-size: 100%;\n line-height: 24px;\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}\n\n/* Specific styles for .heart-rate container */\n.container .heart-rate {\n width: 150px;\n height: 73px;\n position: relative;\n margin: 20px auto;\n}\n\n/* Styles for the fade-in animation */\n.container .heart-rate .fade-in {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: #e8e8e8;\n top: 0;\n right: 0;\n animation: heartRateIn 2.5s linear infinite;\n}\n\n/* Styles for the fade-out animation */\n.container .heart-rate .fade-out {\n position: absolute;\n width: 120%; /* Adjusted width to ensure animation space */\n height: 100%;\n background-color: #e8e8e8;\n top: 0;\n right: -120%;\n animation: heartRateOut 2.5s linear infinite;\n}\n\n/* Keyframes for the heartRateIn animation */\n@keyframes heartRateIn {\n 0% {\n width: 100%;\n }\n 50% {\n width: 0;\n }\n 100% {\n width: 0;\n }\n}\n\n/* Keyframes for the heartRateOut animation */\n@keyframes heartRateOut {\n 0% {\n left: -120%;\n }\n 30% {\n left: -120%;\n }\n 100% {\n left: 0;\n }\n}\n"}

popular-dingo-38

👁 实时预览

📝 源代码