vue多游戏玩家效果
代码语言:html
所属分类:布局界面
代码描述:vue多游戏玩家效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"); :root { --card-width: 400px; } html { box-sizing: border-box; font-size: 19px; } *, *:before, *:after { box-sizing: inherit; } html, body { width: 100%; height: 100%; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; background: #f6f6f6; font-family: "Roboto", sans-serif; font-weight: normal; -webkit-box-pack: center; justify-content: center; margin: 0; padding: 0; } .card { border-radius: 20px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); overflow: hidden; width: 400px; } .card .card-bottom { -webkit-box-align: center; align-items: center; background: #ffffff; display: -webkit-box; display: flex; height: 90px; padding: 20px; } .player-controls { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; margin-left: auto; } .player-controls .player-count { text-align: center; width: 34px; } .player-controls button { -webkit-box-align: center; align-items: center; background: #e8e8e8; border-radius: 34px; border: 0; cursor: pointer; display: -webkit-box; display: flex; height: 34px; -webkit-box-pack: center; justify-content: center; outline: none; width: 34px; } .player-controls button[disabled] { cursor: not-allowed; } .player-controls button svg { color: #808080; width: 20px; } .players { display: -webkit-box; display: flex; overflow: hidden; width: 100%; } .players .player { display: -webkit-box; display: flex; flex-shrink: 0; -webkit-box-pack: center; justify-content: center; -webkit-transition: width 0.2s cubic-bezier(0.83, 0, 0.17, 1); transition: width 0.2s cubic-bezier(0.83, 0, 0.17, 1); height: 150px; } .players .player svg { width: 80px; height: 125px; } .players .player-1 { background: #b5d2fa; } .players .player-1 .controller-button { fill: #b5d2fa; } .players .player-1 .controller-body { fill: #2d5ff0; } .players .player-1 .controller-cord { fill: #6f9ddf; } .players .player-2 { background: #f7e2e8; } .players .player-2 .controller-button { fill: #f7e2e8; } .players .player-2 .controller-body { fill: #df7694; } .players .player-2 .controller-cord { fill: #ebaecb; } .players .player-3 { background: #e7fde8; } .players .player-3 .controller-button { fill: #e7fde8; } .players .player-3 .controller-body { fill: #85ed71; } .players .player-3 .controller-cord { fill: #b5eeb1; } .players .player-4 { background: #fefce2; } .players .player-4 .controller-button { fill: #fefce2; } .players .player-4 .controller-body { fill: #e4b14b; } .players .player-4 .controller-cord { fill: #e7c986; } .credits { margin-top: 50px; color: #747474; display: block; font-size: 14px; text-align: center; } .credits a { color: #ea4c89; font-weight: 500; } </style> </head> <body translate="no"> <div id="app"> <div class="card"> <div class="card-top"> <div :class="[.........完整代码请登录后点击上方下载按钮下载查看
网友评论0