gsap+svg实现滑轮齿轮旋转交互表单效果代码

代码语言:html

所属分类:表单美化

代码描述:gsap+svg实现滑轮齿轮旋转交互表单效果代码,勾选checkbox滑轮升起、输入正确邮箱、滑轮落下。

代码标签: 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="grabbing-hand-finger-open" d="M48.89,54.39l27.82.36a4.06,4.06,0,0,0,4.2-3.93h0A4.06,4.06,0,0,0,77,46.62l-19.88-.78"/>
           
<path class="grabbing-hand-finger-open" d="M40.78,28c5.75-5.85,12.66-22,10.5-25.88-2.25-4.09-6,.1-14.73,8.66C30.84,16.36,30.91,17.1,24.32,24"/>
       
</g>

       
<g class="pull-system">
           
<line class="checkbox-pull-line" x1="0" y1="0" x2="0" y2="0"/>
           
<g class="checkbox-pull-circle">
               
<circle cx="0" cy="0" r="10"/>
               
<circle cx="0" cy="0" r="4" fill="#000000"/>
           
</g>
           
<circle class="submit-btn-circle" cx="0" cy="0" r="3" stroke="none" fill="#000" />
           
<path class="submit-btn-connector" d=""></path>
       
</g>

       
<g class="spray-hand-container">
           
<g class="pushing-hand">
               
<circle cx="18" cy="0" r="5" fill="#000000"/>
               
<circle cx="18" cy="-70" r="5" fill="#000000"/>
               
<path d="M18,-70 v70" stroke-width="4"/>
               
<g>
                   
<path d="M25.3,32.9V60.2a4.2,4.2,0,0,0,4.2,4.2h0a4.2,4.2,0,0,0,4.2-4.2V26.7"/>
                   
<rect x="3.9" y="18.4" width="8.4" height="21.47" rx="3.7" transform="translate(10.2 -1) rotate(19.4)"/>
                   
<path d="M20.9,24a3.4,3.4,0,0,0-1.7-1.1h0a4.2,4.2,0,0,0-5.4,2.5L9.1,38.8a4.3,4.3,0,0,0,2.6,5.4h0a4.3,4.3,0,0,0,5.4-2.6l1.8-5.1"/>
                   
<path d="M18.4,37.9,17.3,43a4.2,4.2,0,0,0,3.4,4.9h0a4.3,4.3,0,0,0,4.5-2.3"/>
                   
<path fill="white" d="M29,16.8c-6.4,5-15,13.2-12.8,17.8s6,.7,15.8-6.7c6.4-4.8,7.4-12.6.5-19.2V4.2A3.8,3.8,0,0,0,28.7.5H8A3.5,3.5,0,0,0,5.4,1.6,3.7,3.7,0,0,0,4.3,4.2V8.7"/>
                   
<path d="M4.3,8.7c-5.8,6.4-3.6,20-2.2,24.8"/>
               
</g>
           
</g>
           
<g class="sprayer">
               
<g class="sprayer-head">
                   
<defs>
                        <radialGrad.........完整代码请登录后点击上方下载按钮下载查看

网友评论0