三维立体表单点击效果-html代码-BFW代码库

三维立体表单点击效果

代码语言：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&amp;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;
.........完整代码请登录后点击上方下载按钮下载查看