使用SVG实现的订阅/注册表单提交辅助动画

点击提交表单时，提交按钮变形为圆环旋转，然后表单图标变为纸飞机形状。

svg，变形，表单

《three.js GLTF Animation Blending（分离的动画文件）》申请公开！

第三方库
作品简介 2030
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    tl = new TimelineLite();
    var form = $(".sub-form"),
        sub = $(".submit-under"),
        allsub = $(".allsub"),
        loader = $(".loader circle"),
        loader2 = $(".loader2 circle"),
        loaders = [loader, loader2],
        circP = $(".circle-paper");

TweenMax.set(sub, {
        opacity: 0.7,
        rotationY: 90
    });
    TweenMax.set($(".submit-under, .loader, .loader2, .circle-paper, p.success-dialog, h2.success"), {
        visibility: "visible"
    });
    TweenMax.set(loader, {
        drawSVG: '100% 100%',
        rotation: -90
    });
    TweenMax.set(circP, {
        scaleY: 0,
        transformOrigin: "50% 50%"
    });
    TweenMax.set([loader2, circP], {
        opacity: 0
    });
    TweenMax.set($(".success, .success-dialog"), {
        opacity: 0
    });

$(".submit").on("click", function(e) {
        e.preventDefault;
        tl.to(sub, 1, {
            opacity: 1,
            rotationY: 0,
            ease: Expo.easeOut
        });
        tl.add("flip");
        tl.to($(".submit"), 0.5, {
            rotationX: 90,
            ease: Circ.easeOut
        }, "flip-=1.5");
        tl.to($(".submit"), 0.5, {
            opacity: 0
        }, "flip-=0.5");
        tl.to(sub, 0.25, {
            css: {
                borderRadius: "50%",
                backgroundColor: "#d6c7ca"
            },
            ease: Circ.easeOut
        }, "flip-=0.5");
        tl.to(sub, 1.2, {
            scaleX: 0.16,
            transformOrigin: "50% 50%",
            ease: Expo.easeOut
        }, "flip-=0.5");
        tl.fromTo(loader, 1, {
            transformOrigin: "50% 50%",
            drawSVG: "50% 50%"
        }, {
            transformOrigin: "50% 50%",
            drawSVG: "100%"
        }, "flip+=1");
        tl.to(sub, 0.8, {
            rotationX: 90,
            scaleY: 0
        }, "flip+=1.2");
        tl.to(loader2, 0.1, {
            opacity: 1
        }, "flip+=1.8");
        tl.to(loader2, 0.5, {
            opacity: 1,
            transformOrigin: "50% 50%",
            scaleX: 0,
            rotation: 180
        }, "flip+=2");
        tl.to(loader2, 0.5, {
            opacity: 1,
            transformOrigin: "50% 50%",
            scaleX: 1,
            rotation: 180
        }, "flip+=2.5");
        tl.add("success");
        tl.to($(".circle-quill"), 0.5, {
            scaleY: 0,
            transformOrigin: "50% 50%",
            ease: Circ.easeOut
        }, "success");
        tl.to(circP, 0.5, {
            scaleY: 1,
            opacity: 1,
            transformOrigin: "50% 50%",
            ease: Circ.easeIn
        }, "success");
        tl.to($(".circle-quill"), 0.5, {
            scaleY: 0,
            transformOrigin: "50% 50%",
            ease: Circ.easeOut
        }, "success");
        tl.to($("input"), 0.5, {
            scaleY: 0
        }, "success");
        tl.to($(".info"), 0.5, {
            scaleY: 0
        }, "success");
        tl.to($(".success"), 0.5, {
            scaleY: 1,
            opacity: 1
        }, "success+=1");
        tl.to($(".success-dialog"), 1, {
            opacity: 1
        }, "success+=1");
        tl.to(loaders, 0.5, {
            scaleY: 0,
            stroke: "#b1dbd3",
            transformOrigin: "50% 50%"
        }, "success");
        tl.to(form, 0.5, {
            css: {
                backgroundColor: "#7aada5"
            }
        }, "success");
    });
});

编译

CSS

html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/form-bk.jpg") no-repeat center center;
    background-size: cover;
    font-family: 'Lato', sans-serif;
}
form {
    background: #faf5f3;
    width: 280px;
    margin-top: 50px;
    margin-bottom: 50px;
    position: absolute;
    z-index: 10;
    padding: 60px 60px 80px;
    left: 50%;
    margin-left: -230px;
    opacity: 0.85;
}
form h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: 18px;
    color: #2f1f1e;
    letter-spacing: 0.061em;
    margin-top: 60px;
    margin-bottom: 20px;
}
form h2.success {
    color: #356e64;
    margin-top: -40px;
    margin-bottom: 0px;
    padding: 0;
}
form p.success-dialog {
    margin-top: -150px;
    color: #356e64;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.8em;
    text-transform: uppercase;
}
form p.success-dialog a {
    color: #9d775f;
    text-decoration: none;
    transition: 0.8s all ease;
}
form p.success-dialog a:hover {
    color: #c08159;
    transition: 0.4s all ease;
}
form input {
    width: 100%;
    background: #fff;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: none;
    appearance: none;
    border: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #ebd7cf;
    padding-top: 8px;
    padding-bottom: 8px;
    text-transform: uppercase;
    font-size: 11px;
    position: relative;
    z-index: 500;
    letter-spacing: 0.06em;
}
form input:focus {
    border: 1px solid #ebd7cf;
    outline: none;
    appearance: none;
}
form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
form .submit {
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
    text-transform: uppercase;
    font-size: 11px;
    position: relative;
    z-index: 500;
    letter-spacing: 0.06em;
    text-align: center;
    cursor: pointer;
    background: #ec7242;
    color: #fff;
    width: 101%;
    transition: 0.8s all ease;
}
form .submit:hover {
    background: #d6673c;
    transform: translateY(1px);
    transition: 0.4s all ease;
}
#firstname {
    margin-top: 20px;
}
.circle {
    padding: 15px;
    height: 25px;
    width: 25px;
    margin-top: -80px;
    margin-left: 115px;
    position: absolute;
    z-index: 20;
    border-radius: 50%;
    clear: both;
    opacity: 0.8;
}
.circle-quill {
    border: 1px solid #ebd7cf;
    background: #fff;
}
.circle-paper {
    border: 1px solid #9ac0ba;
    background: #5d978e;
}
.submit-under,
.loader,
.loader2,
.circle-paper,
p.success-dialog,
h2.success {
    visibility: hidden;
}
.submit-under {
    background: #8c6e7a;
    width: 291px;
    height: 45px;
    margin-top: -40px;
    margin-left: -4px;
    position: absolute;
    z-index: -1;
}
.loader,
.loader2 {
    position: absolute;
    z-index: -5;
    margin-top: -45px;
    margin-left: 114px;
}

HTML

<form class="sub-form">
    <div class="input-contain">
        <div class="circle circle-quill">
            <svg class="quill" x="0px" y="0px" width="25.167px" height="25.167px" viewBox="0 0 25.167 25.167" enable-background="new 0 0 25.167 25.167" xml:space="preserve">
                <path fill="#4e3332" d="M0,25C3.125,15.625,11.304,0,25,0c-6.421,5.151-9.375,17.188-14.062,17.188s-4.688,0-4.688,0L1.562,25H0z" />
            </svg>
        </div>
        <div class="circle circle-paper">
            <svg class="paper" x="0" y="0" width="25.1" height="25.1" viewBox="0 0 25.1 25.1" enable-background="new 0 0 25.125 25.125" xml:space="preserve">
                <path fill="#b1dbd3" d="M24 2.1C23.5 2.3 1.2 10.2 0.8 10.3c-0.4 0.1-0.5 0.5 0 0.6 0.5 0.2 5 2 5 2H5.8l3 1.2c0 0 14.2-10.4 14.4-10.6 0.2-0.1 0.4 0.1 0.3 0.3 -0.1 0.2-10.3 11.2-10.3 11.2 0 0 0 0 0 0l-0.6 0.7 0.8 0.4c0 0 6.1 3.3 6.5 3.5 0.4 0.2 0.9 0 1-0.4 0.1-0.6 3.7-16.1 3.8-16.4C24.7 2.3 24.4 2 24 2.1zM8.7 21.2c0 0.3 0.2 0.4 0.4 0.2 0.3-0.3 3.7-3.4 3.7-3.4l-4.2-2.2V21.2z"
                />
            </svg>
        </div>
        <h2 class="info">want more information?</h2>
        <h2 class="success">Success!</h2>
        <input type="text" id="firstname" name="firstname" placeholder="full name" required maxlength="100" />
        <input type="email" placeholder="email" name="email" required="required" />
        <div class="allsub">
            <div class="submit">Contact Us Today</div>
            <div class="submit-under"></div>
        </div>
        
        <svg class="loader" x="0px" y="0px" width="55px" height="55px" viewBox="0 0 55 55" enable-background="new 0 0 55 55" xml:space="preserve">
            <circle fill="none" stroke-linecap="round" stroke="#B29EAC" stroke-width="2" stroke-miterlimit="10" cx="27.583" cy="27.334" r="26.583" />
        </svg>
        <svg class="loader2" x="0px" y="0px" width="55px" height="55px" viewBox="0 0 55 55" enable-background="new 0 0 55 55" xml:space="preserve">
            <circle fill="none" stroke-linecap="round" stroke="#B29EAC" stroke-width="2" stroke-miterlimit="10" cx="27.583" cy="27.334" r="26.583" />
        </svg>
        <p class="success-dialog">
            We’ll be in touch shortly.
            <br> In the meantime,
            <br> check out our
            <br>
            <a href="#">weekly offerings.</a>
        </p>
    </div>
    
</form>

点击提交表单时，提交按钮变形为圆环旋转，然后表单图标变为纸飞机形状。

svg，变形，表单

编辑器支持Emmet

快捷键

点击提交表单时，提交按钮变形为圆环旋转，然后表单图标变为纸飞机形状。

svg，变形，表单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：