前言：
当前看官们对“dashboardhtml5”大体比较关怀，你们都想要了解一些“dashboardhtml5”的相关文章。那么小编在网上网罗了一些关于“dashboardhtml5””的相关文章，希望咱们能喜欢，看官们一起来了解一下吧！Html：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>玻璃效果网站</title> <link href="../css/20240302.css" rel="stylesheet"> </head> <body> <main> <section class="glass"> <div class="dashboard"> <div class="user"> <img src="./image/20240302/photo1.png" alt=""> <h3> Demo </h3> <p>Pro Member</p> </div> <div class="links"> <div class="link"> <img src="./image/20240302/Streams.png" alt="" /> <h2>Streams</h2> </div> <div class="link"> <img src="./image/20240302/Games.png" alt="" /> <h2>Games</h2> </div> <div class="link"> <img src="./image/20240302/news.png" alt="" /> <h2>New</h2> </div> <div class="link"> <img src="./image/20240302/Library.png" alt="" /> <h2>Library</h2> </div> </div> <div class="pro"> <h2>Join pro for free games.</h2> <img src="./image/20240302/show_128.png" alt="" /> </div> </div> <div class="games"> <div class="status"> <h1>Active Games</h1> <input type="text" /> </div> <div class="cards"> <div class="card"> <img src="./image/20240302/20240302_1.png" alt="" /> <div class="card-info"> <h2>恶 魔 之 魂</h2> <p>PS5 Version</p> <div class="progress"></div> </div> <h2 class="percentage">60%</h2> </div> <div class="card"> <img src="./image/20240302/20240302_2.png" alt="" /> <div class="card-info"> <h2>无 路 之 旅</h2> <p>PS5 Version</p> <div class="progress"></div> </div> <h2 class="percentage">60%</h2> </div> <div class="card"> <img src="./image/20240302/20240302_3.png" alt="" /> <div class="card-info"> <h2>麻布仔大冒险</h2> <p>PS5 Version</p> <div class="progress"></div> </div> <h2 class="percentage">60%</h2> </div> </div> </div> </section> </main> <div class="circle1"></div> <div class="circle2"></div> </body></html>
Css：
* { margin: 0; padding: 0; box-sizing: border-box;}h1{ color: #426696; font-weight: 600; font-size: 3rem; opacity: 0.8;}h2, p{ color: #658ec6; font-weight: 500; opacity: 0.8;}h3{ color: #426696; font-weight: 600; opacity: 0.8;}main { font-family: "Poppins", sans-serif; min-height: 100vh; background: linear-gradient(to right top, #ffcb06, #ec9c07); display: flex; align-items: center; justify-content: center;}.glass{ background: white; min-height: 80vh; width: 60%; background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) ); border-radius: 2rem; z-index: 2; backdrop-filter: blur(2rem); display: flex;}.circle1,.circle2{ background: white; background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3) ); height: 20rem; width: 20rem; position: absolute; border-radius: 50%;}.circle1{ top: 5%; right: 15%;}.circle2{ bottom: 5%; left: 10%;}.dashboard{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-align: center; background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) ); border-radius: 2rem;}.link{ display: flex; margin: 2rem 0rem; padding: 1rem 5rem; align-items: center;}.link h2{ padding: 0rem 1rem;}.games{ flex: 2;}.pro{ background: linear-gradient(to right top, #ffcb06, #ec9c07); border-radius: 2rem; color: white; padding: 1rem; position: relative;}.pro img{ position: absolute; top: 5%; right: 8%;}.pro h2{ width: 40%; color: white; font-weight: 600;}.status{ margin-bottom: 3rem;}.status input{ background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3) ); border: none; width: 50%; padding: 0.5rem; border-radius: 2rem;}.games{ margin: 5rem; display: flex; flex-direction: column; justify-content: space-evenly;}.card{ display: flex; background: linear-gradient( to left top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) ); border-radius: 1rem; margin: 2rem 0rem; padding: 2rem; box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212); justify-content: space-between;}.card-info{ display: flex; flex-direction: column; justify-content: space-between;}.progress{ background: linear-gradient(to right top, #ffcb06, #ec9c07); width: 100%; height: 25%; border-radius: 1rem; position: relative; overflow: hidden;}.progress::after { content: ""; width: 100%; height: 100%; background: rgba(236, 236, 236); position: absolute; left: 60%;}.percentage{ font-weight: bold; background: linear-gradient(to right top, #ffcb06, #ec9c07); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}效果
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #dashboardhtml5
![[图]System Center 2019将于本月正式上线](http://www.longkongtuishu.com/upload/article/20240717/7_136879.jpg)