{"html":"

\n \n\t\t

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

\n\t

\n\t\t

\t\n\t

\n\t

\n\t\t

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

\n\t\t

12:23 / 15:43

\n\t

","css":".card {\n width: 350px;\n height: 225px;\n background: rgba(114,113,114);\n border-radius: 15px;\n padding: 10px;\n color: white;\n display: flex;\n flex-direction: column;\n box-shadow: inset 0px 0px 1px black;\n transition: all .2s ease-in;\n}\n\n.card::after {\n content: \"hover video\";\n font-size: 1.4em;\n font-weight: 800;\n position: absolute;\n right: 50%;\n top: 50%;\n transform: translate(50%,-50%);\n}\n\n.up {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.up .right {\n display: flex;\n gap: 20px;\n}\n\n.playbar {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n align-items: end;\n}\n\n.bar {\n width: 340px;\n height: 8px;\n margin-bottom: 8px;\n background-color: rgba(170, 163, 163, 0.356);\n}\n\n.bar::after {\n content: \"\";\n width: 10px;\n height: 8px;\n position: absolute;\n background: rgb(167, 57, 57);\n animation: example 25s ease;\n}\n\n.down {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.down__icons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 20px;\n}\n\n.pause {\n width: 50px;\n height: 50px;\n fill: rgb(241, 239, 239);\n}\n\n.time {\n font-size: .85em;\n}\n\n.svg-icon {\n width: 30px;\n height: 30px;\n padding: 5px;\n border-radius: 50%;\n ;\n fill: rgb(241, 239, 239);\n}\n\n.card * {\n opacity: 0;\n transition: all .2s ease-in;\n}\n\n.card:hover * {\n opacity: 1;\n}\n\n.card:hover {\n box-shadow: inset 0px 10px 36px -13px rgba(0,0,0,0.75);\n}\n\n.svg-icon:hover {\n background-color: rgba(3, 5, 5, 0.5);\n}\n\n@keyframes example {\n 0% {\n width: 0px;\n }\n\n 100% {\n width: 330px;\n }\n}\n"}

cowardly-starfish-70

👁 实时预览

📝 源代码