{"loaderData":{"0":null,"0-2":{"total":7053,"projects":[{"created":"2022-07-04T12:22:06.000Z","isPrivate":0,"projectId":"bb9a164ed876469a","snapshot":"https://s1.qingting.work/runjs/1eed3e9d9904.png?x-oss-process=style/webp-w-500","tags":null,"title":"segmentfault - 实现健康类图表","updated":"2023-11-29T23:10:18.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":167,"cssLen":778,"jsLen":46,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2022-07-04T12:12:41.000Z","isPrivate":0,"projectId":"295b7e77e1ff41ff","snapshot":"https://s1.qingting.work/runjs/f24ff9cbfa98.png?x-oss-process=style/webp-w-500","tags":null,"title":"CodePen Home Pure CSS \"Biker\"","updated":"2024-01-17T13:49:47.000Z","isTemplate":0,"htmlType":"html","pureCSS":1,"htmlLen":2313,"cssLen":55892,"jsLen":40,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110","html":"

","css":".bike {\n width: 800px;\n height: 500px;\n margin: auto;\n position: relative;\n background: #42b0ce;\n overflow: hidden;\n}\n.bike *,\n.bike *::before,\n.bike *::after {\n position: absolute;\n content: \"\";\n}\n.bike__bike {\n top: 250px;\n left: 200px;\n width: 370px;\n height: 210px;\n z-index: 2;\n}\n.bike__bike:before {\n top: 200px;\n left: -10px;\n width: 400px;\n height: 20px;\n border-radius: 100%;\n background: #398ca5;\n}\n.bike__wheel {\n top: 68px;\n left: 9px;\n width: 140px;\n height: 140px;\n box-sizing: border-box;\n border-radius: 100%;\n border: 5px solid #27292b;\n box-shadow: inset 0 1px 0 5px white;\n}\n.bike__wheel:after {\n width: 9px;\n height: 9px;\n border-radius: 100%;\n background: white;\n z-index: 30;\n}\n.bike__wheel:nth-child(1):after {\n top: 60px;\n left: 60px;\n}\n.bike__wheel:nth-child(2):after {\n top: 63px;\n left: 59px;\n}\n.bike__wheel:nth-child(1) {\n animation: 0.8s bike-wheel-1 linear infinite;\n}\n.bike__wheel:nth-child(2) {\n left: 217px;\n transform: rotate(220deg);\n animation: 0.8s bike-wheel-2 linear infinite;\n}\n.bike__wheel .bike__needle:nth-child(1) {\n top: 18px;\n left: 16px;\n height: 42px;\n width: 42px;\n border-top: 4px solid white;\n border-left: 2px solid white;\n border-radius: 100% 0;\n}\n.bike__wheel .bike__needle:nth-child(1):before {\n top: -10px;\n left: 27px;\n height: 20px;\n width: 20px;\n background: #42b0ce;\n transform: rotate(-20deg);\n}\n.bike__wheel .bike__needle:nth-child(1):after {\n top: 25px;\n left: -7px;\n height: 24px;\n width: 24px;\n background: #42b0ce;\n transform: rotate(20deg);\n}\n.bike__wheel .bike__needle:nth-child(2) {\n top: 31px;\n left: 72px;\n height: 42px;\n width: 42px;\n border-top: 4px solid white;\n border-left: 2px solid white;\n border-radius: 100% 0;\n transform: rotate(112deg);\n}\n.bike__wheel .bike__needle:nth-child(2):before {\n top: -10px;\n left: 27px;\n height: 20px;\n width: 20px;\n background: #42b0ce;\n transform: rotate(-20deg);\n}\n.bike__wheel .bike__needle:nth-child(2):after {\n top: 25px;\n left: -7px;\n height: 24px;\n width: 24px;\n background: #42b0ce;\n transform: rotate(20deg);\n}\n.bike__wheel .bike__needle:nth-child(3) {\n top: 73px;\n left: 52px;\n height: 32px;\n width: 32px;\n border-top: 4px solid white;\n border-left: 2px solid white;\n border-radius: 100% 0;\n transform: rotate(-148deg);\n}\n.bike__wheel .bike__needle:nth-child(3):before {\n top: -10px;\n left: 37px;\n height: 20px;\n width: 20px;\n background: #42b0ce;\n transform: rotate(-20deg);\n}\n.bike__wheel .bike__needle:nth-child(3):after {\n top: 31px;\n left: -7px;\n height: 24px;\n width: 24px;\n background: #42b0ce;\n transform: rotate(20deg);\n}\n.bike__top-tube {\n top: 34px;\n left: 124px;\n width: 130px;\n height: 25px;\n box-sizing: border-box;\n border-radius: 0 100%;\n border-bottom: 7px solid #ef425a;\n border-left: 3px solid #ef425a;\n transform: rotate(4deg);\n animation: 0.8s bike-top-tube linear infinite;\n}\n.bike__down-tube {\n top: 62px;\n left: 182px;\n width: 64px;\n height: 100px;\n box-sizing: border-box;\n border-radius: 0 100%;\n border-left: 7px solid #ef425a;\n border-bottom: 7px solid #ef425a;\n transform: rotate(67deg);\n animation: 0.8s bike-down-tube linear infinite;\n}\n.bike__down-tube:after {\n top: 50px;\n left: 9px;\n width: 2px;\n height: 15px;\n box-sizing: border-box;\n border-radius: 2px;\n background: white;\n transform: rotate(-26deg);\n}\n.bike__seat-tube {\n top: 32px;\n left: 77px;\n width: 6px;\n height: 115px;\n background: #ef425a;\n transform: rotate(-21deg);\n box-shadow: inset 2px 0 0 0 #c73149;\n}\n.bike__seat-stays {\n top: 32px;\n left: 31px;\n width: 4px;\n height: 115px;\n background: #ef425a;\n transform: rotate(28deg);\n}\n.bike__chain-stays {\n top: 99px;\n left: 51px;\n width: 4px;\n height: 90px;\n background: #ef425a;\n transform: rotate(98deg);\n}\n.bike__star {\n top: 137px;\n left: 89px;\n width: 28px;\n height: 28px;\n background: #c73149;\n transform: rotate(45deg);\n border-radius: 2px;\n animation: 0.8s bike-star linear infinite;\n z-index: 3;\n}\n.bike__star:before {\n width: 28px;\n height: 28px;\n background: #c73149;\n transform: rotate(45deg);\n border-radius: 2px;\n}\n.bike__star:after {\n width: 28px;\n height: 28px;\n background: #c73149;\n transform: rotate(45deg);\n border-radius: 2px;\n}\n.bike__pedal {\n top: 11px;\n left: 12px;\n width: 42px;\n height: 2px;\n background: #27292b;\n transform-origin: left center;\n transform: rotate(59deg);\n z-index: 10;\n}\n.bike__pedal:before {\n top: -2px;\n left: 30px;\n width: 24px;\n height: 5px;\n background: #27292b;\n transform-origin: center center;\n transform: rotate(-94deg);\n animation: 0.8s bike-pedal linear infinite;\n}\n.bike__chain {\n top: 130px;\n left: 2px;\n width: 100px;\n height: 28px;\n box-sizing: border-box;\n transform: rotate(9deg);\n border-radius: 100% 0 0 100%;\n border: 3px solid #f9d276;\n}\n.bike__fo {\n top: 90px;\n left: 235px;\n width: 70px;\n height: 30px;\n box-sizing: border-box;\n border-radius: 100% 0;\n border-left: 4px solid #27292b;\n border-top: 4px solid #27292b;\n transform: rotate(-95deg);\n animation: 0.8s bike-fo linear infinite;\n}\n.bike__head-tube {\n top: 44px;\n left: 246px;\n width: 6px;\n border-style: solid;\n border-color: #ef425a transparent;\n border-width: 27px 3px 0;\n transform: rotate(-10deg);\n box-shadow: 0 3px 0 0 #ef425a;\n animation: 0.8s bike-head-tube linear infinite;\n}\n.bike__head-tube:before {\n top: -31px;\n left: -5px;\n width: 15px;\n height: 4px;\n background: #ef425a;\n}\n.bike__head-tube:after {\n top: -23px;\n left: 0px;\n width: 9px;\n height: 16px;\n box-sizing: border-box;\n border-top: 2px solid #f9d276;\n border-left: 2px solid #f9d276;\n border-bottom: 2px solid #f9d276;\n background: #27292b;\n}\n.bike__helm {\n top: 22px;\n left: 242px;\n width: 7px;\n height: 20px;\n background: #27292b;\n transform: rotate(-15deg);\n animation: 0.8s bike-helm linear infinite;\n}\n.bike__helm:before {\n top: -10px;\n left: 1px;\n width: 20px;\n height: 20px;\n border-radius: 100% 0 0 0;\n border-top: 5px solid #27292b;\n border-left: 5px solid #27292b;\n transform: rotate(54deg);\n}\n.bike__helm:after {\n top: -6.5px;\n left: 33px;\n width: 30px;\n height: 30px;\n border-radius: 0 0 100% 0;\n border-bottom: 5px solid #27292b;\n border-right: 5px solid #27292b;\n transform: rotate(54deg);\n}\n.bike__seat {\n top: 18px;\n left: 54px;\n width: 5px;\n height: 20px;\n background: #27292b;\n transform: rotate(-21deg);\n}\n.bike__seat:before {\n top: -16px;\n left: -13px;\n width: 40px;\n height: 24px;\n box-sizing: border-box;\n border-bottom: 4px solid #27292b;\n border-left: 4px solid #27292b;\n border-radius: 0 100%;\n transform: rotate(0deg);\n}\n.bike__seat:after {\n top: -13px;\n left: -7px;\n width: 36px;\n height: 16px;\n background: #27292b;\n border-radius: 0 100% 0 100%;\n transform: rotate(10deg);\n}\n.bike__lock {\n top: 46px;\n left: 201px;\n width: 20px;\n height: 30px;\n box-sizing: border-box;\n border: 3px solid #27292b;\n border-radius: 100% 100% 0 0;\n transform: rotate(20deg);\n animation: 0.8s bike-lock linear infinite;\n}\n.bike__lock:before {\n top: 22px;\n left: -3px;\n width: 20px;\n height: 8px;\n box-sizing: border-box;\n border-right: 6px solid #27292b;\n background: #f9d276;\n transform: rotate(0deg);\n}\n.bike__lock:after {\n top: 22px;\n left: 6px;\n border-bottom: 7px solid #ec4564;\n border-left: 5px solid transparent;\n}\n.bike__tubes {\n top: 0px;\n left: 70px;\n width: 124px;\n height: 170px;\n transform: rotate(0deg);\n animation: 0.8s bike-tubes linear infinite;\n}\n.bike__man {\n top: 60px;\n left: 280px;\n width: 300px;\n height: 400px;\n animation: 0.8s bike-man linear infinite;\n}\n.bike__butt {\n top: 138px;\n left: 23px;\n width: 40px;\n height: 40px;\n background: #4a0a23;\n border-radius: 2px 0 0 20px;\n transform: rotate(28deg);\n transform-origin: bottom right;\n animation: 0.8s bike-butt linear infinite;\n z-index: 5;\n}\n.bike__front-leg {\n top: 155px;\n left: 54px;\n width: 38px;\n height: 96px;\n background: #4a0a23;\n border-radius: 20px 20px 90% 0;\n transform-origin: left 22px;\n transform: rotate(-14deg);\n animation: 0.8s bike-front-leg linear infinite;\n z-index: 5;\n}\n.bike__front-leg:before {\n top: 85px;\n left: 0px;\n width: 22px;\n height: 20px;\n background: #4a0a23;\n border-radius: 100%;\n transform-origin: left top;\n}\n.bike__front-leg .bike__shin {\n top: 97px;\n left: 10px;\n width: 7px;\n height: 70px;\n background: #4a0a23;\n transform-origin: -3px top;\n transform: rotate(19deg);\n animation: 0.8s bike-front-leg-shin linear infinite;\n}\n.bike__front-leg .bike__shin:before {\n top: -12px;\n left: -15px;\n width: 22px;\n height: 28px;\n background: #4a0a23;\n border-radius: 100% 100% 0;\n}\n.bike__front-leg .bike__shin:after {\n top: 22px;\n left: -20px;\n border-left: 34px solid transparent;\n border-right: 6px solid transparent;\n border-top: 10px solid #4a0a23;\n transform: rotate(-112deg);\n}\n.bike__front-leg .bike__skin {\n top: 65px;\n left: 2px;\n width: 4px;\n height: 37px;\n background: linear-gradient(\n to bottom,\n #efa47b 0%,\n #efa47b 40%,\n #27292b 41%,\n #27292b 100%\n );\n border-radius: 0 0 2px 2px;\n transform: rotate(1deg);\n}\n.bike__front-leg .bike__skin:before {\n top: -1px;\n left: -5px;\n height: 0;\n width: 9px;\n border-top: 5px solid #75012c;\n border-left: 2px solid transparent;\n border-right: 3px solid transparent;\n transform: rotate(-10deg);\n}\n.bike__front-leg .bike__skin:after {\n top: 14px;\n left: -4px;\n width: 12px;\n height: 2px;\n border-radius: 2px;\n background: #27292b;\n}\n.bike__front-leg .bike__ked {\n top: 93px;\n left: 3px;\n width: 35px;\n height: 10px;\n background: #27292b;\n border-bottom: 3px solid white;\n border-radius: 10px 100% 2px 0;\n transform-origin: 5px top;\n transform: rotate(73deg);\n animation: 0.8s bike-front-leg-ked linear infinite;\n}\n.bike__front-leg .bike__ked:before {\n top: 5px;\n left: 32px;\n width: 20px;\n height: 5px;\n background: #27292b;\n border-bottom: 3px solid white;\n border-radius: 2px 6px 2px 2px;\n transform-origin: left 5px;\n transform: rotate(-70deg);\n animation: 0.8s bike-front-leg-ked-nose linear infinite;\n}\n.bike__front-leg .bike__ked:after {\n top: -3px;\n left: 2px;\n width: 12px;\n height: 5px;\n border-radius: 2px;\n background: #27292b;\n transform: rotate(-90deg);\n}\n.bike__back-leg {\n top: 157px;\n left: 70px;\n width: 38px;\n height: 96px;\n background: #4a0a23;\n border-radius: 20px 20px 90% 0;\n transform-origin: left 22px;\n transform: rotate(-58deg);\n animation: 0.8s bike-back-leg linear infinite;\n z-index: 1;\n}\n.bike__back-leg:before {\n top: 85px;\n left: 0px;\n width: 22px;\n height: 20px;\n background: #4a0a23;\n border-radius: 100%;\n -webkit-transform-origin: left top;\n transform-origin: left top;\n}\n.bike__back-leg .bike__shin {\n top: 97px;\n left: 10px;\n width: 7px;\n height: 70px;\n background: #4a0a23;\n transform-origin: -3px top;\n transform: rotate(101deg);\n animation: 0.8s bike-back-leg-shin linear infinite;\n}\n.bike__back-leg .bike__shin:before {\n top: -12px;\n left: -15px;\n width: 22px;\n height: 28px;\n background: #4a0a23;\n border-radius: 100% 100% 0;\n}\n.bike__back-leg .bike__shin:after {\n top: 22px;\n left: -20px;\n border-left: 34px solid transparent;\n border-right: 6px solid transparent;\n border-top: 10px solid #4a0a23;\n transform: rotate(-112deg);\n}\n.bike__back-leg .bike__skin {\n top: 65px;\n left: 2px;\n width: 4px;\n height: 37px;\n background: linear-gradient(\n to bottom,\n #efa47b 0%,\n #efa47b 40%,\n #27292b 41%,\n #27292b 100%\n );\n border-radius: 0 0 2px 2px;\n transform: rotate(1deg);\n}\n.bike__back-leg .bike__skin:before {\n top: -1px;\n left: -5px;\n height: 0;\n width: 9px;\n border-top: 5px solid #75012c;\n border-left: 2px solid transparent;\n border-right: 3px solid transparent;\n transform: rotate(-10deg);\n}\n.bike__back-leg .bike__skin:after {\n top: 14px;\n left: -4px;\n width: 12px;\n height: 2px;\n border-radius: 2px;\n background: #27292b;\n}\n.bike__back-leg .bike__ked {\n top: 94px;\n left: -2px;\n width: 35px;\n height: 10px;\n background: #27292b;\n border-bottom: 3px solid white;\n border-radius: 10px 100% 2px 0;\n transform-origin: 5px top;\n transform: rotate(-30deg);\n animation: 0.8s bike-back-leg-ked linear infinite;\n}\n.bike__back-leg .bike__ked:before {\n top: 5px;\n left: 32px;\n width: 20px;\n height: 5px;\n background: #27292b;\n border-bottom: 3px solid white;\n border-radius: 2px 6px 2px 2px;\n transform-origin: left 5px;\n transform: rotate(-10deg);\n animation: 0.8s bike-front-leg-ked-nose linear infinite;\n}\n.bike__back-leg .bike__ked:after {\n top: -3px;\n left: 2px;\n width: 12px;\n height: 5px;\n border-radius: 2px;\n background: #27292b;\n transform: rotate(-90deg);\n}\n.bike__shirt {\n top: 45px;\n left: 88px;\n width: 50px;\n height: 133px;\n border-radius: 100% 0;\n background: #d63942;\n transform: rotate(54deg);\n animation: 0.8s bike-shirt linear infinite;\n z-index: 5;\n}\n.bike__shirt:before {\n top: 53px;\n left: 0px;\n height: 0;\n width: 28px;\n border-bottom: 80px solid #d63942;\n border-left: 10px solid transparent;\n border-right: 25px solid transparent;\n border-radius: 0 0 100% 0 / 0 0 40% 0;\n}\n.bike__shirt:after {\n top: 3px;\n left: -5px;\n height: 131px;\n width: 50px;\n box-sizing: border-box;\n border-radius: 100% 0 100% 0;\n transform: rotate(-180deg);\n border-bottom: 8px solid #d63942;\n border-right: 8px solid #d63942;\n}\n.bike__collar {\n top: -14px;\n left: 45px;\n width: 6px;\n height: 20px;\n background: #efa47b;\n border-radius: 0 0 4px 0;\n transform: rotate(0deg);\n}\n.bike__collar:before {\n top: 13px;\n left: -2px;\n width: 10px;\n height: 30px;\n background: #d63942;\n}\n.bike__collar:after {\n top: 7px;\n left: 3px;\n width: 6px;\n height: 6px;\n border-radius: 100%;\n background: #efa47b;\n}\n.bike__arm {\n top: 117px;\n left: 135px;\n width: 15px;\n height: 45px;\n transform-origin: 30px -12px;\n animation: 0.8s bike-arm linear infinite;\n z-index: 5;\n}\n.bike__arm:after {\n top: 40px;\n left: -11px;\n width: 12px;\n height: 8px;\n border-radius: 40% 0 0 1px;\n background: #efa47b;\n transform: rotate(10deg);\n}\n.bike__arm:before {\n top: 0px;\n left: 0px;\n width: 15px;\n height: 45px;\n background: #efa47b;\n border-radius: 5px 0 0 80%;\n transform: rotate(30deg);\n box-shadow: inset 0 4px 0 0 #ef8a70, inset 2px 0 0 0 #ef8a70;\n}\n.bike__sleeve {\n top: -26px;\n left: 22px;\n width: 25px;\n height: 28px;\n background: #d53942;\n box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.1);\n border-radius: 20px 20px 0 0;\n transform-origin: 5px top;\n transform: rotate(24deg);\n}\n.bike__sleeve:after {\n top: 28px;\n left: -2px;\n width: 29px;\n height: 5px;\n border-radius: 2px;\n background: #c5343d;\n transform-origin: left bottom;\n}\n.bike__forearm {\n top: -10px;\n left: -5px;\n height: 0;\n width: 4px;\n border-bottom: 52px solid #efa47b;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n transform: rotate(139deg);\n transform-origin: bottom center;\n animation: 0.8s bike-forearm linear infinite;\n}\n.bike__forearm:before {\n top: 27px;\n left: -3px;\n width: 8px;\n height: 5px;\n border-top: 1px solid black;\n border-bottom: 1px solid black;\n transform: rotate(14deg);\n}\n.bike__forearm:after {\n top: 19px;\n left: -1px;\n width: 5px;\n height: 3px;\n border-top: 1px solid black;\n border-bottom: 1px solid black;\n transform: rotate(14deg);\n}\n.bike__hand {\n top: 4px;\n left: -1px;\n height: 15px;\n width: 5px;\n background: #efa47b;\n border-radius: 3px 3px 0 0;\n transform: rotate(181deg);\n transform-origin: center top;\n animation: 0.8s bike-hand linear infinite;\n}\n.bike__hand:before {\n top: 5px;\n left: -2px;\n height: 24px;\n width: 12px;\n border-radius: 0 100% 2px 4px;\n transform: rotate(30deg);\n background: #efa47b;\n}\n.bike__hand:after {\n top: 11px;\n left: -9px;\n height: 12px;\n width: 15px;\n border-radius: 4px 0 4px 4px;\n transform: rotate(-30deg);\n background: #efa47b;\n}\n.bike__arm:nth-child(1) {\n top: 115px;\n left: 144px;\n width: 15px;\n height: 45px;\n transform-origin: 30px -12px;\n transform: rotate(2deg);\n animation: 0.8s bike-back-arm linear infinite;\n z-index: 1;\n}\n.bike__arm:nth-child(1):before {\n top: 40px;\n left: -11px;\n width: 12px;\n height: 8px;\n border-radius: 40% 0 0 1px;\n background: #dc7465;\n transform: rotate(10deg);\n}\n.bike__arm:nth-child(1):after {\n width: 15px;\n height: 45px;\n background: #dc7465;\n border-radius: 5px 0 0 80%;\n transform: rotate(30deg);\n box-shadow: inset 0 4px 0 0 #dc7465, inset 2px 0 0 0 #dc7465;\n}\n.bike__arm:nth-child(1) .bike__sleeve {\n top: -27px;\n left: 17px;\n width: 25px;\n height: 28px;\n background: #75012c;\n border-radius: 20px 20px 0 0;\n transform-origin: 5px top;\n transform: rotate(24deg);\n}\n.bike__arm:nth-child(1) .bike__sleeve:after {\n top: 28px;\n left: -3px;\n width: 30px;\n height: 5px;\n background: #75012c;\n}\n.bike__arm:nth-child(1) .bike__forearm {\n top: -10px;\n left: -5px;\n height: 0;\n width: 4px;\n border-bottom: 52px solid #dc7465;\n border-left: 2px solid transparent;\n border-right: 2px solid transparent;\n transform: rotate(135deg);\n transform-origin: bottom center;\n animation: 0.8s bike-back-forearm linear infinite;\n}\n.bike__arm:nth-child(1) .bike__forearm:before {\n top: 27px;\n left: -3px;\n width: 8px;\n height: 5px;\n border-top: 1px solid black;\n border-bottom: 1px solid black;\n transform: rotate(14deg);\n}\n.bike__arm:nth-child(1) .bike__forearm:after {\n top: 19px;\n left: -1px;\n width: 5px;\n height: 3px;\n border-top: 1px solid black;\n border-bottom: 1px solid black;\n transform: rotate(14deg);\n}\n.bike__arm:nth-child(1) .bike__hand {\n top: 4px;\n left: -1px;\n height: 15px;\n width: 5px;\n background: #dc7465;\n border-radius: 3px 3px 0 0;\n transform: rotate(181deg);\n transform-origin: center top;\n animation: 0.8s bike-back-hand linear infinite;\n}\n.bike__arm:nth-child(1) .bike__hand:before {\n top: 5px;\n left: -2px;\n height: 24px;\n width: 12px;\n border-radius: 0 100% 2px 4px;\n transform: rotate(30deg);\n background: #dc7465;\n}\n.bike__arm:nth-child(1) .bike__hand:after {\n top: 11px;\n left: -9px;\n height: 12px;\n width: 15px;\n border-radius: 4px 0 4px 4px;\n transform: rotate(-30deg);\n background: #dc7465;\n}\n.bike__head {\n top: 44px;\n left: 175px;\n width: 50px;\n height: 58px;\n background: #efa47b;\n border-radius: 0 100%;\n transform: rotate(20deg);\n animation: 0.8s bike-head linear infinite;\n}\n.bike__head:before {\n top: -2px;\n left: 28px;\n width: 50px;\n height: 50px;\n border-radius: 100% 0;\n background: #efa47b;\n transform: rotate(-40deg);\n}\n.bike__head:after {\n top: -10px;\n left: 20px;\n width: 40px;\n height: 40px;\n background: #efa47b;\n transform: rotate(-20deg);\n}\n.bike__eye {\n top: 2px;\n left: 41px;\n width: 8px;\n height: 17px;\n border-radius: 100%;\n background: white;\n transform: rotate(-20deg);\n z-index: 1;\n}\n.bike__eye:nth-child(1) {\n box-shadow: 0 0 0 3px #ef8a70;\n}\n.bike__eye:nth-child(2) {\n top: -4px;\n left: 56px;\n}\n.bike__eye:before {\n top: 6px;\n left: 4px;\n width: 5px;\n height: 7px;\n box-sizing: border-box;\n box-shadow: inset 1px 0 0 2px black;\n background: white;\n border-radius: 100%;\n}\n.bike__eye:after {\n top: -3px;\n left: -3px;\n width: 13px;\n height: 3px;\n border-radius: 1px;\n background: #75012c;\n}\n.bike__nose {\n top: -10px;\n left: 50px;\n width: 5px;\n height: 30px;\n border-radius: 0 0 0 100%;\n background: #ef425a;\n transform: rotate(-20deg);\n z-index: 18;\n}\n.bike__nose:before {\n top: 22px;\n left: 4px;\n width: 14px;\n height: 10px;\n box-sizing: border-box;\n background: #ef425a;\n border-radius: 100%;\n transform: rotate(-25deg);\n}\n.bike__nose:after {\n top: 3px;\n left: 3px;\n width: 4px;\n height: 25px;\n border-radius: 1px;\n background: #ef425a;\n transform: rotate(-10deg);\n}\n.bike__month {\n top: 36px;\n left: 33px;\n width: 23px;\n height: 15px;\n border-radius: 100% 0 100% 100%;\n background: white;\n}\n.bike__whisker:nth-child(3) {\n top: 6px;\n left: 60px;\n width: 17px;\n height: 23px;\n border-radius: 100%;\n background: #75012c;\n transform: rotate(-30deg);\n z-index: 17;\n}\n.bike__whisker:nth-child(3):before {\n top: 12px;\n left: 0px;\n width: 19px;\n height: 14px;\n background: #75012c;\n border-radius: 0 0 0 100%;\n}\n.bike__whisker:nth-child(3):after {\n top: 11px;\n left: 19px;\n width: 19px;\n height: 13px;\n background: #75012c;\n border-radius: 0 0 100% 0;\n transform: rotate(-6deg);\n}\n.bike__whisker:nth-child(6) {\n top: 12px;\n left: 39px;\n width: 25px;\n height: 25px;\n border-radius: 100%;\n background: #75012c;\n z-index: 19;\n}\n.bike__whisker:nth-child(6):before {\n top: 12px;\n left: -5px;\n width: 30px;\n height: 17px;\n background: #75012c;\n border-radius: 2px 0 100% 0;\n}\n.bike__whisker:nth-child(6):after {\n top: 10.5px;\n left: -24px;\n width: 19px;\n height: 17px;\n background: #75012c;\n border-radius: 0 0 0 100%;\n transform: rotate(10deg);\n}\n.bike__cap {\n top: -28px;\n left: -5px;\n width: 60px;\n height: 20px;\n border-radius: 100%;\n background: #d63942;\n transform: rotate(-3deg);\n z-index: 20;\n}\n.bike__cap:before {\n top: 7px;\n left: -2px;\n width: 15px;\n height: 31px;\n background: #d63942;\n border-radius: 100% 100% 100% 0;\n transform: rotate(-9deg);\n}\n.bike__cap:after {\n top: 13.5px;\n left: -2px;\n width: 58px;\n height: 17px;\n background: #d63942;\n border-radius: 20px;\n transform: rotate(-20deg);\n}\n.bike__peak {\n top: -23px;\n left: 50px;\n width: 39px;\n height: 39px;\n border-radius: 100% 0;\n background: #a92731;\n transform: rotate(-14deg);\n z-index: 21;\n}\n.bike__peak:before {\n top: -3px;\n left: -1px;\n width: 39px;\n height: 18px;\n border-radius: 0 100%;\n background: #a92731;\n transform: rotate(-42deg);\n}\n.bike__peak:after {\n top: 14px;\n left: -12px;\n width: 17px;\n height: 17px;\n border-right: 4px solid #a92731;\n border-top: 4px solid #a92731;\n border-radius: 0 100% 0 0;\n transform: rotate(53deg);\n}\n.bike__peak-parts {\n top: 14px;\n left: 2px;\n width: 10px;\n height: 10px;\n background: #a92731;\n}\n.bike__peak-parts:before {\n top: 15.5px;\n left: -13px;\n border-bottom: 10px solid #a92731;\n border-left: 14px solid transparent;\n transform: rotate(-7deg);\n}\n.bike__cloud-1 {\n top: 70px;\n left: 300px;\n width: 60px;\n height: 60px;\n border-radius: 100% 100% 0 100%;\n background: white;\n animation: 0.8s bike-cloud linear infinite;\n animation-delay: -0.2s;\n opacity: 0.6;\n}\n.bike__cloud-1:before {\n bottom: 0;\n left: 54px;\n width: 40px;\n height: 40px;\n border-radius: 100% 100% 0 0;\n background: white;\n}\n.bike__cloud-1:after {\n bottom: 0;\n left: 90px;\n width: 30px;\n height: 30px;\n border-radius: 100% 100% 100% 0;\n background: white;\n}\n.bike__cloud-2 {\n top: 172px;\n left: 110px;\n width: 34px;\n height: 34px;\n border-radius: 100% 100% 100% 0;\n background: white;\n animation: 0.8s bike-cloud linear infinite;\n animation-delay: -0.5s;\n opacity: 0.6;\n}\n.bike__cloud-2:before {\n bottom: 0;\n left: -15px;\n width: 24px;\n height: 24px;\n border-radius: 100% 100% 0 0;\n background: white;\n}\n.bike__cloud-2:after {\n bottom: 0;\n left: -30px;\n width: 20px;\n height: 20px;\n border-radius: 100% 100% 0 100%;\n background: white;\n}\n.bike__cloud-3 {\n top: 172px;\n left: 630px;\n width: 34px;\n height: 34px;\n border-radius: 100% 100% 100% 0;\n background: white;\n animation: 0.8s bike-cloud linear infinite;\n animation-delay: -0.8s;\n opacity: 0.6;\n}\n.bike__cloud-3:before {\n bottom: 0;\n left: -15px;\n width: 24px;\n height: 24px;\n border-radius: 100% 100% 0 0;\n background: white;\n}\n.bike__cloud-3:after {\n bottom: 0;\n left: -30px;\n width: 20px;\n height: 20px;\n border-radius: 100% 100% 0 100%;\n background: white;\n}\n\n@keyframes bike-wheel-1 {\n 0% {\n left: 9px;\n }\n 5% {\n left: 9px;\n }\n 10% {\n left: 8px;\n }\n 15% {\n left: 6px;\n }\n 20% {\n left: 3px;\n }\n 25% {\n left: 0px;\n }\n 30% {\n left: -4px;\n }\n 35% {\n left: -8px;\n }\n 40% {\n left: -10px;\n }\n 45% {\n left: -12px;\n }\n 50% {\n left: -12px;\n }\n 55% {\n left: -12px;\n }\n 60% {\n left: -12px;\n }\n 65% {\n left: -10px;\n }\n 70% {\n left: -7px;\n }\n 75% {\n left: -3px;\n }\n 80% {\n left: 2px;\n }\n 85% {\n left: 5px;\n }\n 90% {\n left: 8px;\n }\n 95% {\n left: 9px;\n }\n 100% {\n left: 9px;\n }\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(720deg);\n }\n}\n@keyframes bike-wheel-2 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(720deg);\n }\n\n 0% {\n left: 217px;\n }\n 5% {\n left: 217px;\n }\n 10% {\n left: 218px;\n }\n 15% {\n left: 221px;\n }\n 20% {\n left: 224px;\n }\n 25% {\n left: 228px;\n }\n 30% {\n left: 233px;\n }\n 35% {\n left: 236px;\n }\n 40% {\n left: 239px;\n }\n 45% {\n left: 241px;\n }\n 50% {\n left: 241px;\n }\n 55% {\n left: 241px;\n }\n 60% {\n left: 241px;\n }\n 65% {\n left: 239px;\n }\n 70% {\n left: 236px;\n }\n 75% {\n left: 232px;\n }\n 80% {\n left: 227px;\n }\n 85% {\n left: 222px;\n }\n 90% {\n left: 219px;\n }\n 95% {\n left: 217px;\n }\n 100% {\n left: 217px;\n }\n}\n@keyframes bike-star {\n 0% {\n top: 135px;\n left: 89px;\n transform: rotate(43deg);\n }\n 5% {\n top: 135px;\n left: 89px;\n transform: rotate(53deg);\n }\n 10% {\n top: 135px;\n left: 89px;\n transform: rotate(77deg);\n }\n 15% {\n top: 135px;\n left: 89px;\n transform: rotate(94deg);\n }\n 20% {\n top: 135px;\n left: 93px;\n transform: rotate(114deg);\n }\n 25% {\n top: 135px;\n left: 93px;\n transform: rotate(130deg);\n }\n 30% {\n top: 135px;\n left: 99px;\n transform: rotate(152deg);\n }\n 35% {\n top: 132px;\n left: 99px;\n transform: rotate(172deg);\n }\n 40% {\n top: 131px;\n left: 102px;\n transform: rotate(192deg);\n }\n 45% {\n top: 126px;\n left: 102px;\n transform: rotate(212deg);\n }\n 50% {\n top: 126px;\n left: 102px;\n transform: rotate(232deg);\n }\n 55% {\n top: 130px;\n left: 102px;\n transform: rotate(242deg);\n }\n 60% {\n top: 130px;\n left: 102px;\n transform: rotate(252deg);\n }\n 65% {\n top: 130px;\n left: 102px;\n transform: rotate(271deg);\n }\n 70% {\n top: 130px;\n left: 102px;\n transform: rotate(288deg);\n }\n 75% {\n top: 132px;\n left: 100px;\n transform: rotate(303deg);\n }\n 80% {\n top: 132px;\n left: 100px;\n transform: rotate(325deg);\n }\n 85% {\n top: 130px;\n left: 100px;\n transform: rotate(355deg);\n }\n 90% {\n top: 135px;\n left: 93px;\n transform: rotate(370deg);\n }\n 95% {\n top: 136px;\n left: 87px;\n transform: rotate(385deg);\n }\n 100% {\n top: 135px;\n left: 89px;\n transform: rotate(43deg);\n }\n}\n@keyframes bike-pedal {\n 0% {\n transform: rotate(-94deg);\n }\n 5% {\n transform: rotate(-106deg);\n }\n 10% {\n transform: rotate(-130deg);\n }\n 15% {\n transform: rotate(-146deg);\n }\n 20% {\n transform: rotate(-170deg);\n }\n 25% {\n transform: rotate(-187deg);\n }\n 30% {\n transform: rotate(-213deg);\n }\n 35% {\n transform: rotate(-233deg);\n }\n 40% {\n transform: rotate(-253deg);\n }\n 45% {\n transform: rotate(-273deg);\n }\n 50% {\n transform: rotate(-293deg);\n }\n 55% {\n transform: rotate(-303deg);\n }\n 60% {\n transform: rotate(-314deg);\n }\n 65% {\n transform: rotate(-334deg);\n }\n 70% {\n transform: rotate(-349deg);\n }\n 75% {\n transform: rotate(-362deg);\n }\n 80% {\n transform: rotate(-382deg);\n }\n 85% {\n transform: rotate(-407deg);\n }\n 90% {\n transform: rotate(-421deg);\n }\n 95% {\n transform: rotate(-435deg);\n }\n 100% {\n transform: rotate(-94deg);\n }\n}\n@keyframes bike-top-tube {\n 0% {\n top: 34px;\n left: 124px;\n transform: rotate(4deg);\n }\n 5% {\n top: 34px;\n left: 124px;\n transform: rotate(5deg);\n }\n 10% {\n top: 35px;\n left: 124px;\n transform: rotate(5.5deg);\n }\n 15% {\n top: 35px;\n left: 124px;\n transform: rotate(6deg);\n }\n 20% {\n top: 37px;\n left: 124px;\n transform: rotate(7deg);\n }\n 25% {\n top: 39px;\n left: 124px;\n transform: rotate(8deg);\n }\n 30% {\n top: 43px;\n left: 124px;\n transform: rotate(9deg);\n }\n 35% {\n top: 47px;\n left: 124px;\n transform: rotate(9deg);\n }\n 40% {\n top: 50px;\n left: 124px;\n transform: rotate(9deg);\n }\n 45% {\n top: 51px;\n left: 124px;\n transform: rotate(10deg);\n }\n 50% {\n top: 52px;\n left: 124px;\n transform: rotate(9deg);\n }\n 55% {\n top: 52px;\n left: 124px;\n transform: rotate(9deg);\n }\n 60% {\n top: 52px;\n left: 124px;\n transform: rotate(8deg);\n }\n 65% {\n top: 52px;\n left: 124px;\n transform: rotate(7deg);\n }\n 70% {\n top: 50px;\n left: 124px;\n transform: rotate(6deg);\n }\n 75% {\n top: 45px;\n left: 124px;\n transform: rotate(5deg);\n }\n 80% {\n top: 40px;\n left: 124px;\n transform: rotate(4deg);\n }\n 85% {\n top: 36px;\n left: 124px;\n transform: rotate(4deg);\n }\n 90% {\n top: 35px;\n left: 124px;\n transform: rotate(4deg);\n }\n 95% {\n top: 35px;\n left: 124px;\n transform: rotate(4deg);\n }\n 100% {\n top: 34px;\n left: 124px;\n transform: rotate(4deg);\n }\n}\n@keyframes bike-down-tube {\n 0% {\n top: 62px;\n left: 182px;\n transform: rotate(67deg);\n }\n 5% {\n top: 62px;\n left: 182px;\n transform: rotate(67deg);\n }\n 10% {\n top: 63px;\n left: 182px;\n transform: rotate(67deg);\n }\n 15% {\n top: 63px;\n left: 182px;\n transform: rotate(69deg);\n }\n 20% {\n top: 63px;\n left: 182px;\n transform: rotate(72deg);\n }\n 25% {\n top: 67px;\n left: 182px;\n transform: rotate(72deg);\n }\n 30% {\n top: 71px;\n left: 182px;\n transform: rotate(75deg);\n }\n 35% {\n top: 71px;\n left: 184px;\n transform: rotate(77deg);\n }\n 40% {\n top: 73px;\n left: 179px;\n transform: rotate(80deg);\n }\n 45% {\n top: 75px;\n left: 179px;\n transform: rotate(80deg);\n }\n 50% {\n top: 75px;\n left: 179px;\n transform: rotate(80deg);\n }\n 55% {\n top: 75px;\n left: 179px;\n transform: rotate(80deg);\n }\n 60% {\n top: 77px;\n left: 181px;\n transform: rotate(76deg);\n }\n 65% {\n top: 77px;\n left: 181px;\n transform: rotate(73deg);\n }\n 70% {\n top: 77px;\n left: 177px;\n transform: rotate(70deg);\n }\n 75% {\n top: 72px;\n left: 179px;\n transform: rotate(67deg);\n }\n 80% {\n top: 66px;\n left: 182px;\n transform: rotate(67deg);\n }\n 85% {\n top: 63px;\n left: 182px;\n transform: rotate(67deg);\n }\n 90% {\n top: 61px;\n left: 182px;\n transform: rotate(67deg);\n }\n 95% {\n top: 61px;\n left: 182px;\n transform: rotate(67deg);\n }\n 100% {\n top: 62px;\n left: 182px;\n transform: rotate(67deg);\n }\n}\n@keyframes bike-fo {\n 0% {\n top: 90px;\n left: 233px;\n transform: rotate(-90deg);\n }\n 5% {\n top: 90px;\n left: 233px;\n transform: rotate(-90deg);\n }\n 10% {\n top: 90px;\n left: 232px;\n transform: rotate(-90deg);\n }\n 15% {\n top: 93px;\n left: 238px;\n transform: rotate(-100deg);\n }\n 20% {\n top: 93px;\n left: 239px;\n transform: rotate(-102deg);\n }\n 25% {\n top: 95px;\n left: 241px;\n transform: rotate(-105deg);\n }\n 30% {\n top: 97px;\n left: 245px;\n transform: rotate(-115deg);\n }\n 35% {\n top: 97px;\n left: 245px;\n transform: rotate(-115deg);\n }\n 40% {\n top: 97px;\n left: 245px;\n transform: rotate(-115deg);\n }\n 45% {\n top: 100px;\n left: 247px;\n transform: rotate(-121deg);\n }\n 50% {\n top: 102px;\n left: 247px;\n transform: rotate(-121deg);\n }\n 55% {\n top: 102px;\n left: 246px;\n transform: rotate(-121deg);\n }\n 60% {\n top: 102px;\n left: 246px;\n transform: rotate(-121deg);\n }\n 65% {\n top: 102px;\n left: 246px;\n transform: rotate(-121deg);\n }\n 70% {\n top: 100px;\n left: 246px;\n transform: rotate(-119deg);\n }\n 75% {\n top: 97px;\n left: 242px;\n transform: rotate(-110deg);\n }\n 80% {\n top: 94px;\n left: 239px;\n transform: rotate(-103deg);\n }\n 85% {\n top: 91px;\n left: 239px;\n transform: rotate(-103deg);\n }\n 90% {\n top: 90px;\n left: 237px;\n transform: rotate(-98deg);\n }\n 95% {\n top: 90px;\n left: 237px;\n transform: rotate(-98deg);\n }\n 100% {\n top: 90px;\n left: 233px;\n transform: rotate(-90deg);\n }\n}\n@keyframes bike-head-tube {\n 0% {\n top: 44px;\n left: 246px;\n transform: rotate(-10deg);\n }\n 5% {\n top: 44px;\n left: 246px;\n transform: rotate(-10deg);\n }\n 10% {\n top: 44px;\n left: 246px;\n transform: rotate(-10deg);\n }\n 15% {\n top: 48px;\n left: 246px;\n transform: rotate(-8deg);\n }\n 20% {\n top: 51px;\n left: 246px;\n transform: rotate(-11deg);\n }\n 25% {\n top: 55px;\n left: 246px;\n transform: rotate(-8deg);\n }\n 30% {\n top: 59px;\n left: 246px;\n transform: rotate(-8deg);\n }\n 35% {\n top: 59px;\n left: 247px;\n transform: rotate(-10deg);\n }\n 40% {\n top: 63px;\n left: 246px;\n transform: rotate(-6deg);\n }\n 45% {\n top: 66px;\n left: 246px;\n transform: rotate(-6deg);\n }\n 50% {\n top: 68px;\n left: 246px;\n transform: rotate(-6deg);\n }\n 55% {\n top: 68px;\n left: 245px;\n transform: rotate(-8deg);\n }\n 60% {\n top: 67px;\n left: 245px;\n transform: rotate(-8deg);\n }\n 65% {\n top: 65px;\n left: 245px;\n transform: rotate(-8deg);\n }\n 70% {\n top: 62px;\n left: 245px;\n transform: rotate(-8deg);\n }\n 75% {\n top: 56px;\n left: 245px;\n transform: rotate(-9deg);\n }\n 80% {\n top: 50px;\n left: 245px;\n transform: rotate(-11deg);\n }\n 85% {\n top: 47px;\n left: 245px;\n transform: rotate(-11deg);\n }\n 90% {\n top: 45px;\n left: 245px;\n transform: rotate(-11deg);\n }\n 95% {\n top: 44px;\n left: 245px;\n transform: rotate(-11deg);\n }\n 100% {\n top: 44px;\n left: 246px;\n transform: rotate(-10deg);\n }\n}\n@keyframes bike-helm {\n 0% {\n top: 22px;\n left: 242px;\n transform: rotate(-15deg);\n }\n 5% {\n top: 22px;\n left: 242px;\n transform: rotate(-15deg);\n }\n 10% {\n top: 22px;\n left: 242px;\n transform: rotate(-10deg);\n }\n 15% {\n top: 26px;\n left: 244px;\n transform: rotate(-12deg);\n }\n 20% {\n top: 28px;\n left: 244px;\n transform: rotate(-12deg);\n }\n 25% {\n top: 32px;\n left: 244px;\n transform: rotate(-12deg);\n }\n 30% {\n top: 36px;\n left: 244px;\n transform: rotate(-12deg);\n }\n 35% {\n top: 40px;\n left: 245px;\n transform: rotate(-7deg);\n }\n 40% {\n top: 43px;\n left: 245px;\n transform: rotate(-7deg);\n }\n 45% {\n top: 45px;\n left: 245px;\n transform: rotate(-7deg);\n }\n 50% {\n top: 46px;\n left: 244px;\n transform: rotate(-8deg);\n }\n 55% {\n top: 46px;\n left: 244px;\n transform: rotate(-6deg);\n }\n 60% {\n top: 44px;\n left: 243px;\n transform: rotate(-10deg);\n }\n 65% {\n top: 42px;\n left: 242px;\n transform: rotate(-10deg);\n }\n 70% {\n top: 39px;\n left: 242px;\n transform: rotate(-10deg);\n }\n 75% {\n top: 34px;\n left: 242px;\n transform: rotate(-10deg);\n }\n 80% {\n top: 30px;\n left: 242px;\n transform: rotate(-15deg);\n }\n 85% {\n top: 25px;\n left: 242px;\n transform: rotate(-15deg);\n }\n 90% {\n top: 22px;\n left: 242px;\n transform: rotate(-15deg);\n }\n 95% {\n top: 22px;\n left: 242px;\n transform: rotate(-15deg);\n }\n 100% {\n top: 22px;\n left: 242px;\n transform: rotate(-15deg);\n }\n}\n@keyframes bike-lock {\n 0% {\n top: 46px;\n left: 201px;\n transform: rotate(20deg);\n }\n 5% {\n top: 46px;\n left: 201px;\n transform: rotate(11deg);\n }\n 10% {\n top: 47px;\n left: 203px;\n transform: rotate(5deg);\n }\n 15% {\n top: 49px;\n left: 204px;\n transform: rotate(-1deg);\n }\n 20% {\n top: 51px;\n left: 205px;\n transform: rotate(-2deg);\n }\n 25% {\n top: 54px;\n left: 205px;\n transform: rotate(-2deg);\n }\n 30% {\n top: 58px;\n left: 205px;\n transform: rotate(-2deg);\n }\n 35% {\n top: 62px;\n left: 205px;\n transform: rotate(-2deg);\n }\n 40% {\n top: 65px;\n left: 204px;\n transform: rotate(0deg);\n }\n 45% {\n top: 67px;\n left: 203px;\n transform: rotate(5deg);\n }\n 50% {\n top: 67px;\n left: 202px;\n transform: rotate(15deg);\n }\n 55% {\n top: 67px;\n left: 201px;\n transform: rotate(25deg);\n }\n 60% {\n top: 66px;\n left: 199px;\n transform: rotate(27deg);\n }\n 65% {\n top: 65px;\n left: 199px;\n transform: rotate(37deg);\n }\n 70% {\n top: 63px;\n left: 198px;\n transform: rotate(37deg);\n }\n 75% {\n top: 58px;\n left: 199px;\n transform: rotate(38deg);\n }\n 80% {\n top: 51px;\n left: 199px;\n transform: rotate(34deg);\n }\n 85% {\n top: 48px;\n left: 199px;\n transform: rotate(34deg);\n }\n 90% {\n top: 47px;\n left: 200px;\n transform: rotate(30deg);\n }\n 95% {\n top: 46px;\n left: 202px;\n transform: rotate(23deg);\n }\n 100% {\n top: 46px;\n left: 201px;\n transform: rotate(20deg);\n }\n}\n@keyframes bike-tubes {\n 0% {\n top: 0px;\n left: 70px;\n transform: rotate(0deg);\n }\n 5% {\n top: 0px;\n left: 70px;\n transform: rotate(1deg);\n }\n 10% {\n top: 0px;\n left: 70px;\n transform: rotate(2deg);\n }\n 15% {\n top: 0px;\n left: 70px;\n transform: rotate(3deg);\n }\n 20% {\n top: 0px;\n left: 70px;\n transform: rotate(3.5deg);\n }\n 25% {\n top: 2px;\n left: 68px;\n transform: rotate(5deg);\n }\n 30% {\n top: 6px;\n left: 66px;\n transform: rotate(8deg);\n }\n 35% {\n top: 10px;\n left: 64px;\n transform: rotate(10deg);\n }\n 40% {\n top: 12px;\n left: 62px;\n transform: rotate(12deg);\n }\n 45% {\n top: 13px;\n left: 62px;\n transform: rotate(13deg);\n }\n 50% {\n top: 13px;\n left: 62px;\n transform: rotate(11deg);\n }\n 55% {\n top: 13px;\n left: 62px;\n transform: rotate(13deg);\n }\n 60% {\n top: 13px;\n left: 62px;\n transform: rotate(13deg);\n }\n 65% {\n top: 12px;\n left: 62px;\n transform: rotate(11deg);\n }\n 70% {\n top: 11px;\n left: 64px;\n transform: rotate(10deg);\n }\n 75% {\n top: 9px;\n left: 66px;\n transform: rotate(8deg);\n }\n 80% {\n top: 6px;\n left: 66px;\n transform: rotate(5deg);\n }\n 85% {\n top: 4px;\n left: 67px;\n transform: rotate(3deg);\n }\n 90% {\n top: 2px;\n left: 68px;\n transform: rotate(1deg);\n }\n 95% {\n top: 1px;\n left: 70px;\n transform: rotate(0deg);\n }\n 100% {\n top: 0px;\n left: 70px;\n transform: rotate(0deg);\n }\n}\n@keyframes bike-man {\n 0% {\n top: 60px;\n left: 280px;\n }\n 5% {\n top: 63px;\n left: 276px;\n }\n 10% {\n top: 71px;\n left: 267px;\n }\n 15% {\n top: 78px;\n left: 259px;\n }\n 20% {\n top: 86px;\n left: 255px;\n }\n 25% {\n top: 96px;\n left: 256px;\n }\n 30% {\n top: 100px;\n left: 259px;\n }\n 35% {\n top: 98px;\n left: 268px;\n }\n 40% {\n top: 93px;\n left: 278px;\n }\n 45% {\n top: 88px;\n left: 285px;\n }\n 50% {\n top: 86px;\n left: 287px;\n }\n 55% {\n top: 86px;\n left: 283px;\n }\n 60% {\n top: 89px;\n left: 273px;\n }\n 65% {\n top: 92px;\n left: 261px;\n }\n 70% {\n top: 93px;\n left: 252px;\n }\n 75% {\n top: 90px;\n left: 252px;\n }\n 80% {\n top: 83px;\n left: 257px;\n }\n 85% {\n top: 74px;\n left: 266px;\n }\n 90% {\n top: 70px;\n left: 274px;\n }\n 95% {\n top: 67px;\n left: 279px;\n }\n 100% {\n top: 60px;\n left: 280px;\n }\n}\n@keyframes bike-shirt {\n 0% {\n top: 45px;\n left: 88px;\n transform: rotate(54deg);\n }\n 5% {\n top: 45px;\n left: 86px;\n transform: rotate(57deg);\n }\n 10% {\n top: 38px;\n left: 89px;\n transform: rotate(60deg);\n }\n 15% {\n top: 40px;\n left: 90px;\n transform: rotate(56deg);\n }\n 20% {\n top: 40px;\n left: 91px;\n transform: rotate(56deg);\n }\n 25% {\n top: 35px;\n left: 91px;\n transform: rotate(56deg);\n }\n 30% {\n top: 33px;\n left: 91px;\n transform: rotate(56deg);\n }\n 35% {\n top: 33px;\n left: 91px;\n transform: rotate(56deg);\n }\n 40% {\n top: 38px;\n left: 91px;\n transform: rotate(56deg);\n }\n 45% {\n top: 36px;\n left: 91px;\n transform: rotate(56deg);\n }\n 50% {\n top: 37px;\n left: 92px;\n transform: rotate(59deg);\n }\n 55% {\n top: 36px;\n left: 92px;\n transform: rotate(59deg);\n }\n 60% {\n top: 32px;\n left: 92px;\n transform: rotate(59deg);\n }\n 65% {\n top: 28px;\n left: 92px;\n transform: rotate(59deg);\n }\n 70% {\n top: 28px;\n left: 92px;\n transform: rotate(59deg);\n }\n 75% {\n top: 35px;\n left: 93px;\n transform: rotate(55deg);\n }\n 80% {\n top: 41px;\n left: 90px;\n transform: rotate(55deg);\n }\n 85% {\n top: 46px;\n left: 90px;\n transform: rotate(51deg);\n }\n 90% {\n top: 46px;\n left: 90px;\n transform: rotate(51deg);\n }\n 95% {\n top: 46px;\n left: 90px;\n transform: rotate(51deg);\n }\n 100% {\n top: 45px;\n left: 88px;\n transform: rotate(54deg);\n }\n}\n@keyframes bike-head {\n 0% {\n top: 44px;\n left: 175px;\n transform: rotate(20deg);\n }\n 5% {\n top: 44px;\n left: 177px;\n transform: rotate(20deg);\n }\n 10% {\n top: 44px;\n left: 180px;\n transform: rotate(18deg);\n }\n 15% {\n top: 44px;\n left: 181px;\n transform: rotate(18deg);\n }\n 20% {\n top: 44px;\n left: 182px;\n transform: rotate(18deg);\n }\n 25% {\n top: 44px;\n left: 183px;\n transform: rotate(17deg);\n }\n 30% {\n top: 44px;\n left: 184px;\n transform: rotate(17deg);\n }\n 35% {\n top: 45px;\n left: 182px;\n transform: rotate(17deg);\n }\n 40% {\n top: 45px;\n left: 182px;\n transform: rotate(17deg);\n }\n 45% {\n top: 45px;\n left: 183px;\n transform: rotate(17deg);\n }\n 50% {\n top: 45px;\n left: 183px;\n transform: rotate(17deg);\n }\n 55% {\n top: 45px;\n left: 184px;\n transform: rotate(17deg);\n }\n 60% {\n top: 46px;\n left: 186px;\n transform: rotate(17deg);\n }\n 65% {\n top: 46px;\n left: 187px;\n transform: rotate(17deg);\n }\n 70% {\n top: 46px;\n left: 187px;\n transform: rotate(17deg);\n }\n 75% {\n top: 47px;\n left: 185px;\n transform: rotate(17deg);\n }\n 80% {\n top: 47px;\n left: 180px;\n transform: rotate(17deg);\n }\n 85% {\n top: 47px;\n left: 176px;\n transform: rotate(14deg);\n }\n 90% {\n top: 47px;\n left: 176px;\n transform: rotate(17deg);\n }\n 95% {\n top: 44px;\n left: 175px;\n transform: rotate(20deg);\n }\n 100% {\n top: 44px;\n left: 175px;\n transform: rotate(20deg);\n }\n}\n@keyframes bike-back-arm {\n 0% {\n transform: rotate(2deg);\n }\n 5% {\n transform: rotate(0deg);\n }\n 10% {\n transform: rotate(-4deg);\n }\n 15% {\n transform: rotate(-9deg);\n }\n 20% {\n transform: rotate(-12deg);\n }\n 25% {\n transform: rotate(-10deg);\n }\n 30% {\n transform: rotate(-7deg);\n }\n 35% {\n transform: rotate(-1deg);\n }\n 40% {\n transform: rotate(2deg);\n }\n 45% {\n transform: rotate(2deg);\n }\n 50% {\n transform: rotate(2deg);\n }\n 55% {\n transform: rotate(0deg);\n }\n 60% {\n transform: rotate(-4deg);\n }\n 65% {\n transform: rotate(-10deg);\n }\n 70% {\n transform: rotate(-14deg);\n }\n 75% {\n transform: rotate(-13deg);\n }\n 80% {\n transform: rotate(-8deg);\n }\n 85% {\n transform: rotate(-1deg);\n }\n 90% {\n transform: rotate(1deg);\n }\n 95% {\n transform: rotate(1deg);\n }\n 100% {\n transform: rotate(2deg);\n }\n}\n@keyframes bike-back-forearm {\n 0% {\n transform: rotate(135deg);\n }\n 5% {\n transform: rotate(133deg);\n }\n 10% {\n transform: rotate(125deg);\n }\n 15% {\n transform: rotate(120deg);\n }\n 20% {\n transform: rotate(116deg);\n }\n 25% {\n transform: rotate(108deg);\n }\n 30% {\n transform: rotate(108deg);\n }\n 35% {\n transform: rotate(110deg);\n }\n 40% {\n transform: rotate(121deg);\n }\n 45% {\n transform: rotate(132deg);\n }\n 50% {\n transform: rotate(137deg);\n }\n 55% {\n transform: rotate(136deg);\n }\n 60% {\n transform: rotate(131deg);\n }\n 65% {\n transform: rotate(127deg);\n }\n 70% {\n transform: rotate(124deg);\n }\n 75% {\n transform: rotate(120deg);\n }\n 80% {\n transform: rotate(118deg);\n }\n 85% {\n transform: rotate(119deg);\n }\n 90% {\n transform: rotate(128deg);\n }\n 95% {\n transform: rotate(138deg);\n }\n 100% {\n transform: rotate(135deg);\n }\n}\n@keyframes bike-back-hand {\n 0% {\n transform: rotate(181deg);\n }\n 5% {\n transform: rotate(181deg);\n }\n 10% {\n transform: rotate(181deg);\n }\n 15% {\n transform: rotate(201deg);\n }\n 20% {\n transform: rotate(210deg);\n }\n 25% {\n transform: rotate(210deg);\n }\n 30% {\n transform: rotate(210deg);\n }\n 35% {\n transform: rotate(213deg);\n }\n 40% {\n transform: rotate(212deg);\n }\n 45% {\n transform: rotate(212deg);\n }\n 50% {\n transform: rotate(180deg);\n }\n 55% {\n transform: rotate(180deg);\n }\n 60% {\n transform: rotate(193deg);\n }\n 65% {\n transform: rotate(201deg);\n }\n 70% {\n transform: rotate(201deg);\n }\n 75% {\n transform: rotate(210deg);\n }\n 80% {\n transform: rotate(200deg);\n }\n 85% {\n transform: rotate(200deg);\n }\n 90% {\n transform: rotate(200deg);\n }\n 95% {\n transform: rotate(200deg);\n }\n 100% {\n transform: rotate(181deg);\n }\n}\n@keyframes bike-back-leg {\n 0% {\n transform: rotate(-58deg);\n }\n 5% {\n transform: rotate(-64deg);\n }\n 10% {\n transform: rotate(-74deg);\n }\n 15% {\n transform: rotate(-76deg);\n }\n 20% {\n transform: rotate(-76deg);\n }\n 25% {\n transform: rotate(-76deg);\n }\n 30% {\n transform: rotate(-64deg);\n }\n 35% {\n transform: rotate(-53deg);\n }\n 40% {\n transform: rotate(-43deg);\n }\n 45% {\n transform: rotate(-28deg);\n }\n 50% {\n transform: rotate(-23deg);\n }\n 55% {\n transform: rotate(-25deg);\n }\n 60% {\n transform: rotate(-33deg);\n }\n 65% {\n transform: rotate(-40deg);\n }\n 70% {\n transform: rotate(-54deg);\n }\n 75% {\n transform: rotate(-62deg);\n }\n 80% {\n transform: rotate(-62deg);\n }\n 85% {\n transform: rotate(-65deg);\n }\n 90% {\n transform: rotate(-63deg);\n }\n 95% {\n transform: rotate(-57deg);\n }\n 100% {\n transform: rotate(-58deg);\n }\n}\n@keyframes bike-back-leg-shin {\n 0% {\n transform: rotate(101deg);\n }\n 5% {\n transform: rotate(99deg);\n }\n 10% {\n transform: rotate(99deg);\n }\n 15% {\n transform: rotate(92deg);\n }\n 20% {\n transform: rotate(88deg);\n }\n 25% {\n transform: rotate(90deg);\n }\n 30% {\n transform: rotate(82deg);\n }\n 35% {\n transform: rotate(72deg);\n }\n 40% {\n transform: rotate(68deg);\n }\n 45% {\n transform: rotate(53deg);\n }\n 50% {\n transform: rotate(52deg);\n }\n 55% {\n transform: rotate(61deg);\n }\n 60% {\n transform: rotate(74deg);\n }\n 65% {\n transform: rotate(84deg);\n }\n 70% {\n transform: rotate(100deg);\n }\n 75% {\n transform: rotate(111deg);\n }\n 80% {\n transform: rotate(113deg);\n }\n 85% {\n transform: rotate(115deg);\n }\n 90% {\n transform: rotate(112deg);\n }\n 95% {\n transform: rotate(105deg);\n }\n 100% {\n transform: rotate(101deg);\n }\n}\n@keyframes bike-back-leg-ked {\n 0% {\n transform: rotate(-30deg);\n }\n 5% {\n transform: rotate(-20deg);\n }\n 10% {\n transform: rotate(2deg);\n }\n 15% {\n transform: rotate(16deg);\n }\n 20% {\n transform: rotate(28deg);\n }\n 25% {\n transform: rotate(34deg);\n }\n 30% {\n transform: rotate(27deg);\n }\n 35% {\n transform: rotate(37deg);\n }\n 40% {\n transform: rotate(45deg);\n }\n 45% {\n transform: rotate(44deg);\n }\n 50% {\n transform: rotate(36deg);\n }\n 55% {\n transform: rotate(35deg);\n }\n 60% {\n transform: rotate(23deg);\n }\n 65% {\n transform: rotate(3deg);\n }\n 70% {\n transform: rotate(2deg);\n }\n 75% {\n transform: rotate(1deg);\n }\n 80% {\n transform: rotate(-10deg);\n }\n 85% {\n transform: rotate(-6deg);\n }\n 90% {\n transform: rotate(-9deg);\n }\n 95% {\n transform: rotate(-27deg);\n }\n 100% {\n transform: rotate(-30deg);\n }\n}\n@keyframes bike-back-leg-ked-nose {\n 0% {\n transform: rotate(-10deg);\n }\n 5% {\n transform: rotate(-12deg);\n }\n 10% {\n transform: rotate(-21deg);\n }\n 15% {\n transform: rotate(-24deg);\n }\n 20% {\n transform: rotate(-27deg);\n }\n 25% {\n transform: rotate(-27deg);\n }\n 30% {\n transform: rotate(-39deg);\n }\n 35% {\n transform: rotate(-50deg);\n }\n 40% {\n transform: rotate(-48deg);\n }\n 45% {\n transform: rotate(-63deg);\n }\n 50% {\n transform: rotate(-60deg);\n }\n 55% {\n transform: rotate(-67deg);\n }\n 60% {\n transform: rotate(-60deg);\n }\n 65% {\n transform: rotate(-46deg);\n }\n 70% {\n transform: rotate(-40deg);\n }\n 75% {\n transform: rotate(-41deg);\n }\n 80% {\n transform: rotate(-36deg);\n }\n 85% {\n transform: rotate(-43deg);\n }\n 90% {\n transform: rotate(-38deg);\n }\n 95% {\n transform: rotate(-16deg);\n }\n 100% {\n transform: rotate(-10deg);\n }\n}\n@keyframes bike-front-leg {\n 0% {\n transform: rotate(-14deg);\n }\n 5% {\n transform: rotate(-19deg);\n }\n 10% {\n transform: rotate(-36deg);\n }\n 15% {\n transform: rotate(-47deg);\n }\n 20% {\n transform: rotate(-60deg);\n }\n 25% {\n transform: rotate(-72deg);\n }\n 30% {\n transform: rotate(-75deg);\n }\n 35% {\n transform: rotate(-77deg);\n }\n 40% {\n transform: rotate(-77deg);\n }\n 45% {\n transform: rotate(-79deg);\n }\n 50% {\n transform: rotate(-77deg);\n }\n 55% {\n transform: rotate(-73deg);\n }\n 60% {\n transform: rotate(-81deg);\n }\n 65% {\n transform: rotate(-78deg);\n }\n 70% {\n transform: rotate(-70deg);\n }\n 75% {\n transform: rotate(-63deg);\n }\n 80% {\n transform: rotate(-50deg);\n }\n 85% {\n transform: rotate(-37deg);\n }\n 90% {\n transform: rotate(-28deg);\n }\n 95% {\n transform: rotate(-23deg);\n }\n 100% {\n transform: rotate(-14deg);\n }\n}\n@keyframes bike-front-leg-shin {\n 0% {\n transform: rotate(19deg);\n }\n 5% {\n transform: rotate(33deg);\n }\n 10% {\n transform: rotate(65deg);\n }\n 15% {\n transform: rotate(84deg);\n }\n 20% {\n transform: rotate(103deg);\n }\n 25% {\n transform: rotate(119deg);\n }\n 30% {\n transform: rotate(126deg);\n }\n 35% {\n transform: rotate(129deg);\n }\n 40% {\n transform: rotate(127deg);\n }\n 45% {\n transform: rotate(124deg);\n }\n 50% {\n transform: rotate(117deg);\n }\n 55% {\n transform: rotate(107deg);\n }\n 60% {\n transform: rotate(100deg);\n }\n 65% {\n transform: rotate(84deg);\n }\n 70% {\n transform: rotate(66deg);\n }\n 75% {\n transform: rotate(56deg);\n }\n 80% {\n transform: rotate(42deg);\n }\n 85% {\n transform: rotate(32deg);\n }\n 90% {\n transform: rotate(26deg);\n }\n 95% {\n transform: rotate(27deg);\n }\n 100% {\n transform: rotate(19deg);\n }\n}\n@keyframes bike-front-leg-ked {\n 0% {\n transform: rotate(73deg);\n }\n 5% {\n transform: rotate(58deg);\n }\n 10% {\n transform: rotate(39deg);\n }\n 15% {\n transform: rotate(25deg);\n }\n 20% {\n transform: rotate(16deg);\n }\n 25% {\n transform: rotate(9deg);\n }\n 30% {\n transform: rotate(-14deg);\n }\n 35% {\n transform: rotate(-17deg);\n }\n 40% {\n transform: rotate(-14deg);\n }\n 45% {\n transform: rotate(-8deg);\n }\n 50% {\n transform: rotate(-12deg);\n }\n 55% {\n transform: rotate(-7deg);\n }\n 60% {\n transform: rotate(30deg);\n }\n 65% {\n transform: rotate(42deg);\n }\n 70% {\n transform: rotate(51deg);\n }\n 75% {\n transform: rotate(64deg);\n }\n 80% {\n transform: rotate(60deg);\n }\n 85% {\n transform: rotate(70deg);\n }\n 90% {\n transform: rotate(74deg);\n }\n 95% {\n transform: rotate(74deg);\n }\n 100% {\n transform: rotate(73deg);\n }\n}\n@keyframes bike-front-leg-ked-nose {\n 0% {\n transform: rotate(-70deg);\n }\n 5% {\n transform: rotate(-65deg);\n }\n 10% {\n transform: rotate(-60deg);\n }\n 15% {\n transform: rotate(-51deg);\n }\n 20% {\n transform: rotate(-54deg);\n }\n 25% {\n transform: rotate(-48deg);\n }\n 30% {\n transform: rotate(-30deg);\n }\n 35% {\n transform: rotate(-28deg);\n }\n 40% {\n transform: rotate(-26deg);\n }\n 45% {\n transform: rotate(-30deg);\n }\n 50% {\n transform: rotate(-20deg);\n }\n 55% {\n transform: rotate(-15deg);\n }\n 60% {\n transform: rotate(-39deg);\n }\n 65% {\n transform: rotate(-40deg);\n }\n 70% {\n transform: rotate(-40deg);\n }\n 75% {\n transform: rotate(-50deg);\n }\n 80% {\n transform: rotate(-47deg);\n }\n 85% {\n transform: rotate(-56deg);\n }\n 90% {\n transform: rotate(-57deg);\n }\n 95% {\n transform: rotate(-64deg);\n }\n 100% {\n transform: rotate(-70deg);\n }\n}\n@keyframes bike-arm {\n 0% {\n transform: rotate(0deg);\n }\n 5% {\n transform: rotate(-2deg);\n }\n 10% {\n transform: rotate(-5deg);\n }\n 15% {\n transform: rotate(-11deg);\n }\n 20% {\n transform: rotate(-14deg);\n }\n 25% {\n transform: rotate(-11deg);\n }\n 30% {\n transform: rotate(-9deg);\n }\n 35% {\n transform: rotate(-3deg);\n }\n 40% {\n transform: rotate(0deg);\n }\n 45% {\n transform: rotate(1deg);\n }\n 50% {\n transform: rotate(0deg);\n }\n 55% {\n transform: rotate(-2deg);\n }\n 60% {\n transform: rotate(-6deg);\n }\n 65% {\n transform: rotate(-12deg);\n }\n 70% {\n transform: rotate(-16deg);\n }\n 75% {\n transform: rotate(-14deg);\n }\n 80% {\n transform: rotate(-9deg);\n }\n 85% {\n transform: rotate(-3deg);\n }\n 90% {\n transform: rotate(0deg);\n }\n 95% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n@keyframes bike-forearm {\n 0% {\n transform: rotate(139deg);\n }\n 5% {\n transform: rotate(136deg);\n }\n 10% {\n transform: rotate(126deg);\n }\n 15% {\n transform: rotate(124deg);\n }\n 20% {\n transform: rotate(119deg);\n }\n 25% {\n transform: rotate(109deg);\n }\n 30% {\n transform: rotate(109deg);\n }\n 35% {\n transform: rotate(113deg);\n }\n 40% {\n transform: rotate(124deg);\n }\n 45% {\n transform: rotate(133deg);\n }\n 50% {\n transform: rotate(139deg);\n }\n 55% {\n transform: rotate(139deg);\n }\n 60% {\n transform: rotate(133deg);\n }\n 65% {\n transform: rotate(130deg);\n }\n 70% {\n transform: rotate(126deg);\n }\n 75% {\n transform: rotate(121deg);\n }\n 80% {\n transform: rotate(120deg);\n }\n 85% {\n transform: rotate(123deg);\n }\n 90% {\n transform: rotate(131deg);\n }\n 95% {\n transform: rotate(140deg);\n }\n 100% {\n transform: rotate(139deg);\n }\n}\n@keyframes bike-hand {\n 0% {\n transform: rotate(181deg);\n }\n 5% {\n transform: rotate(181deg);\n }\n 10% {\n transform: rotate(201deg);\n }\n 15% {\n transform: rotate(206deg);\n }\n 20% {\n transform: rotate(216deg);\n }\n 25% {\n transform: rotate(216deg);\n }\n 30% {\n transform: rotate(216deg);\n }\n 35% {\n transform: rotate(208deg);\n }\n 40% {\n transform: rotate(200deg);\n }\n 45% {\n transform: rotate(193deg);\n }\n 50% {\n transform: rotate(185deg);\n }\n 55% {\n transform: rotate(189deg);\n }\n 60% {\n transform: rotate(197deg);\n }\n 65% {\n transform: rotate(204deg);\n }\n 70% {\n transform: rotate(208deg);\n }\n 75% {\n transform: rotate(207deg);\n }\n 80% {\n transform: rotate(203deg);\n }\n 85% {\n transform: rotate(196deg);\n }\n 90% {\n transform: rotate(186deg);\n }\n 95% {\n transform: rotate(181deg);\n }\n 100% {\n transform: rotate(181deg);\n }\n}\n@keyframes bike-cloud {\n 0% {\n left: 800px;\n }\n 100% {\n left: -100px;\n }\n}\n"},{"created":"2022-07-04T10:52:14.000Z","isPrivate":0,"projectId":"d90ffd3d966e4ab9","snapshot":"https://s1.qingting.work/runjs/4831fd214a7f.png?x-oss-process=style/webp-w-500","tags":null,"title":"CodePen Home Happy Birthday JavaScript!","updated":"2023-11-21T15:09:17.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":635,"cssLen":3826,"jsLen":933,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2022-07-04T09:51:13.000Z","isPrivate":0,"projectId":"52dbfcdafb434f1e","snapshot":"","tags":null,"title":"Color palette","updated":"2023-11-21T15:09:17.000Z","isTemplate":0,"htmlType":"markdown","pureCSS":0,"htmlLen":138,"cssLen":0,"jsLen":0,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1000"},{"created":"2022-07-04T09:19:42.000Z","isPrivate":0,"projectId":"fe8de771468542cb","snapshot":"https://s1.qingting.work/runjs/9834fee8d060.png?x-oss-process=style/webp-w-500","tags":null,"title":"TinyMCE Editor（商用编辑器） - Collaboration","updated":"2023-11-21T15:09:17.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":1911,"cssLen":102,"jsLen":2685,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2022-07-04T07:58:48.000Z","isPrivate":0,"projectId":"b2dfc57a60b447b6","snapshot":"https://s1.qingting.work/runjs/e0c88684165e.png?x-oss-process=style/webp-w-500","tags":null,"title":"CSS层级小技巧！如何在滚动时自动添加头部阴影？","updated":"2023-11-21T15:09:16.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":3648,"cssLen":420,"jsLen":46,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2022-07-04T07:23:13.000Z","isPrivate":0,"projectId":"354a79e52dfe4e00","snapshot":"https://s1.qingting.work/runjs/43d4e1678965.png?x-oss-process=style/webp-w-500","tags":null,"title":"segmentfault - css选择器问题","updated":"2023-11-21T15:09:16.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":679,"cssLen":128,"jsLen":46,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2022-07-04T06:51:23.000Z","isPrivate":0,"projectId":"5acff377a7c54ba9","snapshot":"https://s1.qingting.work/runjs/71bc91a83e74.png?x-oss-process=style/webp-w-500","tags":"css,icons","title":"Single Element Pure CSS icons","updated":"2023-11-21T15:09:16.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":15057,"cssLen":11514,"jsLen":0,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1100"},{"created":"2022-07-04T05:38:51.000Z","isPrivate":0,"projectId":"a6103a8b6c9f4ec2","snapshot":"https://s1.qingting.work/runjs/200054c9709e.png?x-oss-process=style/webp-w-500","tags":null,"title":"Floating-ui demo","updated":"2024-08-24T08:20:45.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":87,"cssLen":455,"jsLen":708,"nickname":"无为1","avatar":"http://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM6pAxKvLJicbeST8QwUVhEFyyzAkKYc1o8vsicSQmMIkhn9B4G8m20cr3rKALFRXibnkpJz1S8LkPiaDQ/132","username":"58a07d","editors":"1110"},{"created":"2022-07-04T03:48:06.000Z","isPrivate":0,"projectId":"4cfb39c46a66434c","snapshot":"","tags":null,"title":"Calculate text width with JavaScript","updated":"2023-11-21T15:09:16.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":1272,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"0010"},{"created":"2022-07-03T14:03:33.000Z","isPrivate":0,"projectId":"1df1b5e287784d5a","snapshot":"https://s1.qingting.work/runjs/ce0460c8e1a4.png?x-oss-process=style/webp-w-500","tags":"react","title":"React 18 Functional Template","updated":"2023-11-21T15:09:16.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":20,"cssLen":328,"jsLen":306,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2022-07-01T11:45:36.000Z","isPrivate":0,"projectId":"052ae065a0a24410","snapshot":"https://s1.qingting.work/runjs/3586b510856d.png?x-oss-process=style/webp-w-500","tags":"echarts","title":"伪立体柱状图","updated":"2023-11-21T15:09:16.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":37,"cssLen":82,"jsLen":6539,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"}]}},"actionData":null,"errors":null}