gsap+svg实现滑轮齿轮旋转交互表单效果代码
代码语言:html
所属分类:表单美化
代码描述:gsap+svg实现滑轮齿轮旋转交互表单效果代码,勾选checkbox滑轮升起、输入正确邮箱、滑轮落下。
下面为部分代码预览,完整代码请点击下载或在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> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="100%" fy="50%"> <stop offset="0%" stop-color="#777777" stop-opacity="0"/> <stop offset="100%" stop-color="#777777" stop-opacity="1"/> </radialGradient> </defs> <rect x="82.39" y="19.85" width="13.06" height="16.79" rx="1.46"/> <rect x="74.55" y="22.56" width="7.84" height="6.1" rx="1.13"/> <line class="spray-line" stroke="#777777" stroke-dasharray="8 5" x1="22.4" y1="14.76" x2="74.27" y2="25.2" /> <line class="spray-line" stroke="#777777" stroke-dasharray="8 5" x1="21.51" y1="21.12" x2="74.27" y2="25.2" /> <line class="spray-line" stroke="#777777" stroke-dasharray="8 5" x1="21.44" y1="28.26" x2="74.27" y2="25.2" /> <line class="spray-line" stroke="#777777" stroke-dasharray="8 5" x1="22.37" y1="35.54" x2="74.27" y2="25.2" /> <line class="spray-line" stroke="#777777" stroke-dasharray="8 5" x1="24.21" y1="42.36" x2="74.27" y2="25.2" /> <line class="spray-line" stroke="#777777" stroke-dasharray="8 5" x1="24.31" y1="7.78" x2="74.27" y2="25.2" /> <circle fill="url(#grad1)" stroke="none" class="spray-bubble" cx="25.43" cy="12.97" r="12.47" /> <circle fill="url(#grad1)" stroke="none" class="spray-bubble" cx="15.6" cy="25.43" r="15.1" /> <circle fill="url(#grad1)" stroke="none" class="spray-bubble" cx="33.24" cy="37.13" r="9.21" /> <circle fill="url(#grad1)" stroke="none" class="spray-bubble" cx="35.92" cy="19.5" r="11.89" /> <circle fill="url(#grad1)" stroke="none" class="spray-bubble" cx="18.82" cy="34.45" r="11.89" /> </g> <path d="M89,42h0a21.3,21.3,0,0,1,21.3,21.3v56.48a5.06,5.06,0,0,1-5.06,5.06H72.6a5.06,5.06,0,0,1-5.06-5.06V63.4A21.45,21.45,0,0,1,89,42Z" fill="#fff"/> <rect x="78.3" y="36.64" width="21.24" height="6.15" rx="1.93" fill="#fff"/> <rect x="76.33" y="71.46" width="33.96" height="23.23" fill="#cccccc"/> </g> </g> <g> <line class="gear-connector" x1="0" x2="0" y1="0" y2="0"/> <g class="gears"> </g> </g> <g class="grabbing-hand"> <g fill="#ffffff"> <rect class="grabbing-hand-finger-closed" x="44.79" y="13.38" width="8.42" height="22.15" rx="3.67" transform="translate(20.57 71.26) rotate(-85.25)"/> <rect class="grabbing-hand-finger-closed" x="44.08" y="39.17" width="8.42" height="21.47" rx="3.67" transform="translate(-5.44 93.9) rotate(-85.25)"/> <rect class="grabbing-hand-finger-closed" x="45.68" y="30.71" width="8.42" height="22.57" rx="3.67" transform="matrix(0.08, -1, 1, 0.08, 3.91, 88.24)"/> <rect class="grabbing-hand-finger-closed" x="44.98" y="22.21" width="8.42" height="22.57" rx="3.67" transform="matrix(0.08, -1, 1, 0.08, 11.74, 79.74)"/> <path class="grabbing-hand-finger-closed" d="M32.18,27.42c5,6.46,13.22,15.06,17.76,12.81,4.18-2.07.69-6-6.66-15.74C38.46,18.1,30.69,17.1,24.1,24"/> </g> </g> <g class="spiral-container"> <path stroke-width=".8" class="spiral-path" d=""/> </g> <g class="weight-big-container"> <line x1="14" x2="60" y1="14" y2="14"></line> <line x1="14" x2="60" y1="14" y2="55"></line> <circle cx="14" cy="14" r="5" fill="#000000" stroke="none"/> <g class="weight-big" stroke="none"> <path d="M25.5,16.7c.2-.6.5-1.3.7-2C31.1,3.1,23.2,0,14.3,0S-1.6,4.2,2.4,14.7a22.5,22.5,0,0,1,.8,2.4A14.4,14.4,0,0,0,0,26.2c0,8,6.5,11.6,14.5,11.6S29,34.2,29,26.2A14.6,14.6,0,0,0,25.5,16.7ZM14.4,5c5.6,0,9.3,1.9,7.1,8.5a13.5,13.5,0,0,0-7-1.8,14.6,14.6,0,0,0-7.2,1.9C5.5,7.5,8.8,5,14.4,5Z" fill="#231f20"/> <path d="M15.1,15.6l-1.8-.2a9.2,9.2,0,0,0-9.1,9.2,6.2,6.2,0,0,0,.2,1.9A13.3,13.3,0,0,1,15.1,15.6Z" fill="#fff"/> </g> </g> <g class="scales-container"> <defs> <marker id="ball" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="5" orient="auto"> <circle cx="5" cy="5" r="3" fill="#000"/> </marker> </defs> <rect x="10" y="-19" width="30" height="90" rx="15" ry="15" stroke-width="10" stroke="#ccc" /> <rect class="timing-chain" x="10" y="-19" width="30" height="90" rx="15" ry="15" stroke="#fff" /> <rect x="-31" y="-19" width="30" height="144" rx="15" ry="15" stroke-width="10" stroke="#ccc"/> <rect class="timing-chain" x="-31" y="-19" width="30" height="144" rx="15" ry="15" stroke="#fff"/> <g class="reels-connector"> <rect x="-8" y="3.2" width="25" height="10" rx="5" ry="5" /> <circle cx="-1" cy="8.5" r="3" fill="#000" stroke="none"/> <circle cx="9.9" cy="8.5" r="3" fill="#000" stroke="none"/> </g> <g class="car-weight-connector"> <rect x="-36" y="97" width="10" height="95" rx="5" ry="5" /> <circle cx="-31" cy="103" r="3" fill="#000" stroke="none"/> <circle cx="-31" cy="186" r="3" fill="#000" stroke="none"/> </g> <line class="scales-moving-line" x1="147.6" y1="30.52" x2="40" y2="12" stroke-width="2" marker-start="url(#ball)" marker-end="url(#ball)"/> <path fill="#000000" d="M102.45,30.68,92,20.26c-9.89,9.9-9.89,10.47-9.89,10.47Z" /> </g> <g class="car-container"> <g> <g class="car"> <circle cx="17" cy="88" r="5" /> <circle cx="17" cy="88" r="2" fill="#000" /> <circle cx="32" cy="88" r="5" /> <circle cx="32" cy="88" r="2" fill="#000" /> <path d="M10,65 h30 l-5,15 h-20 l-5,-15 " fill="#000" /> </g> <line x1="-51" y1="95" x2="145" y2="95"/> </g> </g> </svg> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script> <script > const containerEl = document.querySelector('.container'); const checkboxEl = document.querySelector('.form-container .form-row input[type="checkbox"]'); const nameEl = document.querySelector('.form-container .form-row input[name="name"]'); const emailEl = document.querySelector('.form-container .form-row input[name="email"]'); const submitBtn = document.querySelector('.form-container .form-row input[type="submit"]'); const sprayer = document.querySelector('.sprayer'); const sprayHandContainer = document.querySelector('.spray-hand-container'); const sprayLines = Array.from(document.querySelectorAll('.spray-line')); const sprayBubbles = Array.from(document.querySelectorAll('.spray-bubble')); const pushingHand = document.querySelector('.pushing-hand'); const sprayerHead = document.querySelector('.sprayer-head'); const gearsContainer = document.querySelector('svg .gears'); const gearConnector = document.querySelector('.gear-connector'); const pullSystemContainer = document.querySelector('.pull-system'); const checkboxPullLine = document.querySelector('.checkbox-pull-line'); const checkboxPullCircle = document.querySelector('.checkbox-pull-circle'); const btnPullLine = document.querySelector('.submit-btn-connector'); const btnHandlerCircle = document.querySelector('.submit-btn-circle'); const spiralContainer = document.querySelector('.spiral-container'); const weightBigContainer = document.querySelector('.weight-big-container'); const scalesContainer = document.querySelector('.scales-container'); const scalesLine = document.querySelector('.scales-moving-line'); const weightBig = document.querySelector('.weight-big'); const spiralPath = document.querySelector('.spiral-path'); const carContainer = document.querySelector('.car-container'); const car = document.querySelector('.car'); const carInclineWrapper = document.querySelector('.car-container g'); const timingChains = Array.from(document.querySelectorAll('.timing-chain')); const reelsConnector = document.querySelector('.reels-connector'); const carWeightConnector = document.querySelector('.car-weight-connector'); const grabbingHand = document.querySelectorAll('.grabbing-hand'); const grabbingHandOpenFingers = Array.from(document.querySelectorAll('.grabbing-hand-finger-open')); const grabbingHandClosedFingers = Array.from(document.querySelectorAll('.grabbing-hand-finger-closed')); layoutPreparation(); scaleToFit(); window.onresize = scaleToFit; function scaleToFit() { const h = 800; if.........完整代码请登录后点击上方下载按钮下载查看
网友评论0