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 .p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0