css布局实现中性化支付类app界面效果
代码语言:html
所属分类:布局界面
代码描述:css布局实现中性化支付类app界面效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Kulim+Park|Lato|Open+Sans&display=swap" rel="stylesheet"> <style> * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { font-size: 16px; } body { font-family: "Kulim Park", sans-serif; background-color: #f5f6f7; color: #4a5568; display: flex; justify-content: center; align-items: center; padding: 1rem 2rem; } a { color: #4a5568; } .text-muted { color: #8fa3bc; } .t1 { font-size: 1.5rem; } .t2 { font-size: 1.25rem; } .t3 { font-size: 1rem; } .t4 { font-size: 0.85rem; } .t5 { font-size: 0.5rem; } .w-100 { width: 100%; } .container { height: 600px; width: 300px; padding: 1rem 1.5rem; border-radius: 3px; box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 6px 0px #DFE4EA; } nav { display: flex; justify-content: space-between; } button, .btn, .toggle-group label { color: inherit; position: relative; background: inherit; outline: none; border: none; box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 6px 0px #DFE4EA; border-radius: 3px; cursor: pointer; text-transform: uppercase; } button:focus::after, button:active::after, .btn.active::after, .toggle-group input:checked + label::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 3px; box-shadow: 2px 2px 2px 0px #DFE4EA inset, -2px -2px 2px 0px #ffffff inset; } button { padding: 0.5rem 0.75rem; } button svg.feather { color: #8fa3bc; width: 1.25rem; height: 1.25rem; } .btn { padding: 0.5rem 0.75rem; } .btn.active { color: #4a5568; } main { padding: 1.5rem 0.25rem; } .toggle-group { display: flex; justify-content: space-around; } .toggle-group label { flex: 1; padding: 0.75rem; text-align: center; border-radius: 8px; } .toggle-group label:first-of-type { margin-right: 1rem; } .toggle-group input { display: none; } .toggle-group input:checked + label::after { border-radius: 8px; } .chart { position: relative; border-radius: 50%; margin: 2rem; box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 6px 0px #DFE4EA; /* inner shadow */ } .chart::after { content: ""; position: absolute; border-radius: 50%; margin: 3rem; top: 0; bottom: 0; right: 0; left: 0; box-shadow: 2px 2px 2px 0px #DFE4EA inset, -2px -2px 2px 0px #ffffff inset; } .chart .chart-label { position: absolute; top: 0; bottom: 0.5rem; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; } .chart .chart-l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0