css布局实现六个不同点数的骰子效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现六个不同点数的骰子效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .first-face { display: flex; justify-content: center; align-items: center; } .second-face { display: flex; justify-content: space-between; } .second-face .pip:nth-of-type(2) { align-self: flex-end; } .third-face { display: flex; justify-content: space-between; } .third-face .pip:nth-of-type(2) { align-self: center; } .third-face .pip:nth-of-type(3) { align-self: flex-end; } .fourth-face, .sixth-face { display: flex; justify-content: space-between; } .fourth-face .column, .sixth-face .column { display: flex; flex-direction: column; justify-content: space-between; } .fifth-face { display: flex; justify-content: space-between; } .fifth-face .column { display: flex; flex-direction: column; justify-content: space-between; } .fifth-face .column:nth-of-type(2) { justify-content: center; } /* OTHER STYLES */ * { box-sizing: border-box; } html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; vertical-align: center; flex-wrap: wrap; align-content: center; font-family: 'Open Sans', sans-serif; background: linear-gradient(top, #222, #333); } [class$="face"] { margin: 16px; padding: 4px; background-color: #e7e7e7; width: 104px; height: 104px; -o-object-fit: contain; object-fit: contain; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; border-radius: 10%; } .pip { display: block; width: 24px; height: 24px; border-radius: 50%; margin: 4px; background-color: #333; box-shadow: inset 0 3px #111, inset 0 -3px #555; }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0