gsap+svg实现齿轮机械式登录表单效果代码-html代码-BFW代码库

gsap+svg实现齿轮机械式登录表单效果代码

代码语言：html

代码描述：gsap+svg实现齿轮机械式登录表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
html,
body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    background-color: #FAF9F6;
}

.container {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
}

svg,
.form-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-container {
    width: 270px;
}

svg {
    width: 1000px;
    pointer-events: none;
}

.form-container .form-row {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.form-container .form-row input {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 5px;
    outline: none;
    border: 2px solid #dddddd;
}

.form-container .form-row input.valid {
    border-color: #000000;
}

.form-container .form-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    padding: 0;
    border: 2px solid #dddddd;
}

.form-container .form-row input[type="submit"] {
    height: 40px;
    cursor: pointer;
    border: none;
    background-color: #eeeeee;
    /*pointer-events: none;*/
}

/*.form-container .form-row input[type="submit"].valid {*/
/*    pointer-events: auto;*/
/*}*/

.form-container input[type="submit"]:hover {
    background-color: #dddddd;
}

.form-container label,
.form-container input,
.form-container input::placeholder {
    font-size: 15px;
    font-family: inherit;
}

svg {
    stroke-width: 1.2px;
    /*stroke: #222245;*/
    stroke: #000000;
    fill: none
}
</style>


  
  
</head>

<body translate="no">
  <div class="container">
        <div class="form-container">
            <label class="form-row">
                <input autocomplete="one-time-code" type="text" id="name" name="name" placeholder="name" required>
            </label>
            <label class="form-row">
                <input autocomplete="one-time-code" type="email" id="email" name="email" placeholder="e-mail" required >
            </label>
            <label class="form-row">
                <input type="checkbox" id="subscribe" name="subscribe"> agree to whatever
            </label>
            <div class="form-row">
                <input type="submit" value="submit">
            </div>
        </div>
    
        <svg viewBox="0 0 1000 1000" stroke-linecap="round" stroke-linejoin="round">
    
            <rect x="710" y="527" width="16" height="47" rx="10" ry="10"></rect>
    
            <g class="grabbing-hand">
                <path d="M48.89,54.39c-3.51.76-15.72,3-22.83-.68a14,14,0,0,0-6.41-1.52h0A3.79,3.79,0,0,1,17,51.09a3.7,3.7,0,0,1-1.1-2.64V27.75A3.75,3.75,0,0,1,19.63,24H24.1"/>
                <path class="grabbing-hand-finger-open" d="M57.05,29.76l24.82,0a4.07,4.07,0,0,0,4.11-4h0a4.07,4.07,0,0,0-4-4.11L48.69,21.3"/>
                <path class="grabbing-hand-finger-open" d="M59.34,37.74l28.81.61a4.06,4.06,0,0,0,4.14-4h0a4.06,4.06,0,0,0-4-4.15L57,29.64"/>
                <path class="grabbing-hand-finger-open" d="M57.13,45.9l26.94.78a4.07,4.07,0,0,0,4.15-4h0a4.07,4.07,0,0,0-4-4.14l-24.84-.8"/>
                <path class="grabb.........完整代码请登录后点击上方下载按钮下载查看