{"html":"

\n\n

\n \n 5/5\n This is Descripion of The Game\n

\n\n \n Game Name\n

","css":".card {\n width: 200px;\n height: 250px;\n background: #262626;\n}\n\n.GameIcon {\n transform: translate(-80px,-50px);\n position: absolute;\n width: 200px;\n height: 200px;\n transition: 0.3s;\n}\n\n.GameImg {\n width: 100%;\n height: 100%;\n}\n\n.Gfooter {\n width: 100%;\n height: 0%;\n background-color: #262626;\n border-radius: 10px;\n transition: all 0.3s;\n}\n\n.Name {\n transform: translate(10px,200px);\n position: absolute;\n background-color: transparent;\n font-weight: bold;\n font-size: 18px;\n transition: 0.3s;\n color: #ff5858;\n}\n\n.SmallIcon {\n width: 0px;\n height: 0px;\n transform: translate(10px,10px);\n border-radius: 10px;\n background-color: #ff5858;\n transition: 0.2s;\n}\n\n.Descripion {\n padding: 10px;\n position: absolute;\n transform: translate(0px,20px);\n opacity: 0%;\n color: #ff5858;\n font-weight: bold;\n font-size: 15px;\n}\n\n.StarIcon {\n transform: translate(-0px,25px);\n width: 20px;\n fill: #ebd300;\n}\n\n.Stars {\n position: absolute;\n color: white;\n font-size: 15px;\n font-weight: bold;\n transform: translate(80px,-70px);\n}\n\n.GameImg:hover .Descripion {\n opacity: 100%;\n}\n\n.GameImg:hover .Gfooter {\n width: 100%;\n height: 100%;\n}\n\n.GameImg:hover .SmallIcon {\n width: 60px;\n height: 60px;\n}\n\n.GameImg:hover .Name {\n transform: translate(75px,-235px);\n}\n\n.GameImg:hover .GameIcon {\n transform: translate(100px,-160px);\n}\n"}

little-insect-93

👁 实时预览

📝 源代码