三维立体表单点击效果
代码语言:html
所属分类:表单美化
代码描述:三维立体表单点击效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind:wght@400;700&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --formBg: #fff; --radioBg: #fff; --radioBgActive: #e3e4e8; --radioBorder: #c7cad1; --radioBorderActive: #c7cad1; --radioSide: #c7cad1; --primary1: #0b46da; --primary2: #255ff4; --primary3: #5583f6; --primary4: #86a6f9; --depth: -4.5em; --ballDiam: 0.75em; --xAngle: -30deg; --yAngle: 45deg; font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1280 - 320)); } body, h3, input { color: var(--fg); font: 1em/1.5 Hind, sans-serif; } body, form, form h3, form label { transform-style: preserve-3d; } body { background: var(--bg); overflow-x: hidden; padding-top: 1.5em; height: 100vh; text-align: center; } h3 { font-weight: bold; } input[type=checkbox] { margin-right: 0.375em; } /* Layer setup */ form { box-shadow: 0 0 0 0.1em var(--radioBorder) inset; max-width: 17em; margin: 4.5em auto 1.5em auto; padding: 1.5em; text-align: left; transform: rotateX(0) rotateY(0) translateZ(calc(var(--depth) / -2)); transition: transform 0.25s linear; } form:before, form label:before, form h3:before, .dot, .dot-shadow { position: absolute; } form:before, form input[type=radio], form label:before, form h3:before { transform: translateZ(var(--depth)); } form:before { background: var(--formBg); content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; } input[type=checkbox]:checked ~ form { transform: rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateZ(calc(var(--depth) / -2)); } /* Radios */ form input[type=radio], form span, form label:before, form h3:before { transition: all 0.15s linear; } form input[type=radio], span { border-radius: 50%; } form input[type=radio] { background: var(--radioBg); box-shadow: 0 0 0 var(--radioSide), 0 0 0 0.1em var(--radioBorder) inset, 0 0 0 #0003; margin-right: 0.5em; width: 1.5em; height: 1.5em; -webkit-appearance: none; appearance: none; } input[type=checkbox]:checked ~ form input[type=radio] { box-shadow: -0.25em -0.25em 0 var(--radioSide), 0 0 0 0.1em var(--radioBorder) inset, -0.25em -0.25em 0.25em #0005; } form input[type=radio]:active, form input[type=radio]:focus { background: var(--radioBgActive); box-shadow: 0 0 0 var(--radioSide), 0 0 0 0.1em var(--radioBorderActive) inset, 0 0 0 #0003; } input[type=checkbox]:checked ~ form input[type=radio]:active, input[type=checkbox]:checked ~ form input[type=radio]:focus { box-shadow: -0.25em -0.25em 0 var(--radioSide), 0 0 0 0.1em var(--radioBorderActive) inset, -0.25em -0.25em 0.25em #0005; } form input[type=radio]:focus { outline: transparent; } /* Text shadows */ form h3 { position: relative; } form label { cursor: pointer; display: flex; margin: 0.75em 0; position: relative; -webkit-tap-highlight-color: transparent; } form label:before, form h3:before { color: transparent; content: attr(data-text); top: 0; text-shadow: 0 0 0.25em transparent; transition-delay: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0