一款使用Bootstrap和GSAP构建的用户注册弹窗

Sign Up Dialog 首先是一个带登录图标的按钮，点击后，缓慢变形扩展为一个注册表单（自带验证功能），输入信息点击提交后，以卡片翻转动画呈现结果提示窗口。

jquery, register, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3383
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var tl = new TimelineMax({
    paused: true
});

$('.button').on('click', function() {
    var $self = $(this);
    if ($self.hasClass('active') && $('form').valid()) {
        tl.resume();
    } else if (tl.progress() == 0) {
        tl.play();
        $self.addClass('active');
    }
    return false;
})

CSSPlugin.defaultTransformPerspective = 800;
TweenLite.set($(".container"), {
    opacity: 1
});

function getFormTimeline() {
    var $title = $('h2'),
        $form = $('form'),
        $fieldset = $('fieldset'),
        tl = new TimelineMax();

var setForm = function() {
        $('.user input').focus();
        $('input').prop('required', true);
        $('input').addClass('required');
    };

tl
        .from($title, 0.5, {
            autoAlpha: 0,
            rotationX: -90,
            transformOrigin: "center top"
        })
        .staggerFrom($fieldset, 0.7, {
            x: -500,
            autoAlpha: 0,
            scale: 0,
            ease: Power3.easeOut
        }, 0.2)
        .add(setForm);
    return tl;
}

function getFlipTimeline() {
    var $container = $('.container');
    var tl = new TimelineLite();
    tl.to($container, 1.2, {
        rotationY: 180,
        ease: Back.easeOut
    });
    return tl;
}

var $container = $('.container');
tl
    .add('start', 0)
    .add(getButtonTimeline(), 'start')
    .add(getContainerTimeline(), 'start')
    .add(getFormTimeline())
    .addPause()
    .add(getLoaderTimeline())
    .set($container, {
        transformStyle: 'preserve-3d'
    })
    .add(getFlipTimeline(), '+=2')
    .add(getBackTimeline(), '-=0.5');

编译

CSS

label.error {
  display: none !important;
}

body {
  background: -webkit-radial-gradient(ellipse farthest-corner at left top, #f35464 30%, #841f4b 100%);
  background: radial-gradient(ellipse farthest-corner at left top, #f35464 30%, #841f4b 100%);
  height: 100vh;
  font-family: 'Raleway';
  color: #333;
}

h1 {
  font-size: 3rem;
  color: #fff;
  margin: 15px;
}
h1 span {
  display: block;
  font-size: 2.5rem;
}

.container {
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  padding-bottom: 15px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
  width: 150px;
  height: 70px;
  border-radius: 15px;
}

.button {
  background: -webkit-radial-gradient(ellipse farthest-corner at left top, #f35464 30%, #841f4b 100%);
  background: radial-gradient(ellipse farthest-corner at left top, #f35464 30%, #841f4b 100%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  cursor: pointer;
  -webkit-transition: box-shadow 500ms ease;
  transition: box-shadow 500ms ease;
  font-size: 2rem;
}
.button:hover {
  box-shadow: 0 7px 30px #f35464;
  -webkit-transition: box-shadow 500ms ease;
  transition: box-shadow 500ms ease;
}

button {
  cursor: pointer;
}

#controller {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

#slider {
  margin-top: 20px;
}

h2 {
  color: #f35464;
  font-weight: bold;
  margin-top: 0;
}

fieldset {
  margin: 10px 0;
  position: relative;
}
fieldset input {
  width: 100%;
  height: 52px;
  color: #333333;
  padding: 15px 40px 15px 15px;
  border-radius: 5px;
  font-size: 14px;
  outline: none !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
fieldset input:focus {
  border-color: #f35464;
  outline: 0;
  box-shadow: inset 0 1px 1px #f35464, 0 0 8px #f35464;
}

fieldset::after {
  font-family: FontAwesome;
  position: absolute;
  right: 15px;
  top: 17px;
  z-index: 2;
  width: 20px;
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.user::after {
  content: '\f007';
}

.email::after {
  content: '\f0e0';
}

.password::after {
  content: '\f023';
}

.required:valid {
  background: -webkit-radial-gradient(ellipse farthest-corner at left top, #7ee2a8 30%, #a8ebc4 100%);
  background: radial-gradient(ellipse farthest-corner at left top, #7ee2a8 30%, #a8ebc4 100%);
}

.required:valid:focus {
  border-color: #f35464;
  outline: 0;
  box-shadow: inset 0 1px 1px #7ee2a8, 0 0 8px #a8ebc4;
}

form {
  text-align: center;
}

.face {
  padding: 15px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: inherit;
}

.front {
  overflow: hidden;
}

.back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  background: #333;
}
.back .title, .back p, .back div {
  color: #fff;
  text-align: center;
}
.back .fa {
  font-size: 10rem;
  margin-top: 15px;
}

.bot-wrapper div {
  margin: 15px;
}

.old {
  display: none;
}

.title {
  font-size: 30px;
}
.button {margin-top: 12px !important;}

HTML

<div class="container">
    <div class="front face">
        <h2>Join our community</h2>
        <hr/>
        <form>
            <fieldset class="user">
                <input placeholder="Username" type="text" name="name" />
            </fieldset>
            <fieldset class="email">
                <input placeholder="Email" type="email" name="email" />
            </fieldset>
            <fieldset class="password">
                <input placeholder="Password" type="password" name="password" />
            </fieldset>
            <button role="submit" class="button">
                <div class="fa fa-sign-in"></div>
            </button>
        </form>
    </div>
    <div class="back face">
        <div class="title">All good !</div>
        <hr/>
        <div class="bot-wrapper">
            <div class="p">You will soon receive a confirmation email from our team !</div>
            <div class="p">We look forward to working with you. Thanks for joining us !</div>
            <div class="p"><i class="fa fa-check-circle-o"></i>
            </div>
        </div>
    </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/TextPlugin.min.js'></script>

Sign Up Dialog 首先是一个带登录图标的按钮，点击后，缓慢变形扩展为一个注册表单（自带验证功能），输入信息点击提交后，以卡片翻转动画呈现结果提示窗口。

jquery, register, template

编辑器支持Emmet

快捷键

Sign Up Dialog 首先是一个带登录图标的按钮，点击后，缓慢变形扩展为一个注册表单（自带验证功能），输入信息点击提交后，以卡片翻转动画呈现结果提示窗口。

jquery, register, template

使用CSS和JavaScript构建一个可滑动的水平时间轴布局

使用JS和CSS实现Bootstrap页面网格布局多列切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：