帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

bootstrap登陆和注册表单切换特效

帝国模板之家 2020-12-10 网页特效 评论

介绍

这是一个炫酷的bootstrap登陆和注册表单切换特效代码,登陆表单上有一个‘+’按钮,点击按钮会动画的切换成注册表单。

使用方法

在页面中加载插件文件。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script  src="./script.js"></script>

添加表单登陆和注册html代码

<div class="container">
            <div class="col-md-6 col-md-offset-3 col-xs-12">
                <!-- @ Start login box wrapper -->
                <div class="blmd-wrapp">
                    <div class="blmd-color-conatiner ripple-effect-All"></div>
                    <div class="blmd-header-wrapp ">
                        <div class="blmd-switches">
                             <button class="btn btn-circle btn-lg btn-blmd ripple-effect btn-success blmd-switch-button">
                                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                    <path fill="#fff" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                                 </svg>
                              </button>
                        </div> 
                        
                    </div> 
                    <div class="blmd-continer">
                        <!-- @ Login form container -->
                        <form action="post" class="clearfix" id="login-form">
                            <h1>登陆页面</h1>
                            <div class="col-md-12">
                                
                                <div class="input-group blmd-form">
                                    <div class="blmd-line">
                                        <input type="text" name="username" autocomplete="off" id="username" class="form-control">
                                        <label class="blmd-label">邮箱或用户名</label>
                                    </div>
                                </div>
                                <div class="input-group blmd-form">
                                    <div class="blmd-line">
                                        <input type="password" name="password" autocomplete="off" id="password" class="form-control">
                                        <label class="blmd-label">密码</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center">
                                <button type="button" class="btn btn-blmd ripple-effect btn-success btn-lg btn-block">登陆</button>
                            </div>
                            <br/>
                        </form>
                        <!-- @ Login form container -->
                        <form action="post" class="clearfix form-hidden" id="Register-form">
                            <h1>注册页面</h1>
                            <div class="col-md-12">
                                
                                <div class="input-group blmd-form">
                                    <div class="blmd-line">
                                        <input type="text" name="username" autocomplete="off" id="username" class="form-control">
                                        <label class="blmd-label">邮箱或用户名</label>
                                    </div>
                                </div>
                                <div class="input-group blmd-form">
                                    <div class="blmd-line">
                                        <input type="password" name="password" autocomplete="off" id="password" class="form-control">
                                        <label class="blmd-label">密码</label>
                                    </div>
                                </div>
                                 <div class="input-group blmd-form">
                                    <div class="blmd-line">
                                        <input type="password" name="rePassword" autocomplete="off" id="password" class="form-control">
                                        <label class="blmd-label">重复密码</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center">
                                <button type="button" class="btn btn-blmd ripple-effect btn-warning btn-lg btn-block">注册</button>
                            </div>
                            <br/>
                        </form>
                    </div>
                </div>
                <div class="signature" style="margin-left: -25px;margin-top: -25px;">
                    <svg fill="#888" width="120" height="120" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" style="text-align: center;transform: rotate(-16deg);">
                        <g>
                            <path d="M133.165,507.429c0.504,0.573,0.928,0.827,0.95,1.112c0.466,6.043,5.137,6.735,9.595,7.253
                                c16.6,1.927,31.618-1.682,43.636-13.897c8.28-8.416,11.527-18.623,8.182-30.239c-2.682-9.316-10.274-14.286-18.566-17.154
                                c-11.13-3.849-22.657-6.753-34.205-9.139c-18.56-3.835-37.292-6.903-55.123-13.591c-14.859-5.573-27.477-14.123-35.803-28.109
                                c-6.422-10.788-8.19-22.616-7.976-34.899c0.547-31.515,14.938-56.913,36.352-78.497c34.017-34.288,75.522-54.583,123.055-62.527
                                c16.874-2.82,33.828-3.029,50.478,1.597c12.248,3.403,22.691,9.51,27.35,22.232c3.851,10.514,3.527,21.044-1.342,31.276
                                c-5.63,11.833-14.179,21.375-23.743,30.104c-0.533,0.486-1.398,0.608-2.108,0.899c-0.186-0.294-0.371-0.588-0.557-0.882
                                c1.833-2.118,3.742-4.175,5.487-6.363c6.57-8.242,12.618-16.841,14.832-27.381c2.991-14.239-3.203-26.132-16.46-32.1
                                c-12.274-5.525-25.342-6.15-38.513-6.05c-34.227,0.26-66.112,9.165-95.414,26.723c-27.584,16.528-49.544,38.67-63.946,67.69
                                c-6.039,12.169-9.712,24.962-8.839,38.919c1.111,17.745,10.499,29.629,25.255,38.115c13.101,7.535,27.726,10.274,42.257,13.279
                                c16.842,3.484,33.785,6.548,50.49,10.595c6.785,1.643,13.376,4.835,19.502,8.3c13.728,7.764,18.12,20.275,16.167,35.371
                                c-3.163,24.453-18.927,37.805-40.765,45.465c-8.353,2.93-16.936,5.38-25.993,3.735c-1.813-0.33-3.663-0.939-5.27-1.828
                                c-3.457-1.912-7.011-4.374-6.613-8.731C125.962,513.846,128.897,510.086,133.165,507.429z"/>
                            <path d="M334.315,500.177c1.253-2.301,2.695-4.52,3.727-6.916c5.869-13.625,11.457-27.375,17.539-40.903
                                c2.276-5.062,5.065-10.11,8.609-14.336c5.631-6.716,14.911-4.573,17.071,3.91c1.366,5.367,1.68,11.096,1.772,16.674
                                c0.234,14.237,0.078,28.481,0.633,43.054c0.61-1.203,1.333-2.362,1.814-3.614c5.451-14.195,10.711-28.466,16.376-42.575
                                c1.836-4.573,4.475-8.881,7.169-13.036c2.276-3.51,6.06-3.734,9.759-2.757c3.568,0.942,6.347,3.056,7.16,6.898
                                c0.409,1.935,0.482,3.953,0.581,5.94c0.745,14.961,1.512,29.921,2.158,44.886c0.269,6.225,3.091,10.915,7.96,14.56
                                c0.389,0.291,0.723,0.659,1.062,1.011c0.072,0.075,0.051,0.239,0.073,0.362c-4.641,4.902-15.39,3.443-18.464-3.124
                                c-2.113-4.514-3.37-9.69-3.797-14.674c-0.777-9.068-0.611-18.214-0.921-27.325c-0.166-4.865-0.361-9.739-0.856-14.577
                                c-0.144-1.407-1.367-2.704-2.095-4.051c-1.198,0.918-2.97,1.584-3.5,2.794c-3.045,6.955-5.887,14.003-8.626,21.086
                                c-4.538,11.735-8.87,23.55-13.47,35.26c-0.989,2.516-2.429,5.033-4.267,6.977c-1.269,1.342-3.693,2.493-5.39,2.251
                                c-1.438-0.205-3.338-2.358-3.695-3.949c-0.891-3.981-1.36-8.129-1.398-12.216c-0.148-15.749-0.057-31.501-0.066-47.251
                                c-0.001-1.374,0.251-2.874-0.211-4.089c-0.568-1.493-1.511-3.474-2.756-3.905c-1.281-0.444-3.652,0.243-4.6,1.291
                                c-1.707,1.886-2.926,4.315-3.967,6.685c-7.527,17.121-14.903,34.31-22.48,51.408c-1.191,2.688-2.833,5.342-4.839,7.471
                                c-4.423,4.692-10.264,3.335-11.486-2.949c-1.06-5.447-0.775-11.158-1.059-16.753c-0.06-1.182-0.009-2.369-0.009-4.089
                                c-3.65,5.198-6.668,10.023-10.215,14.421c-4.759,5.9-10.541,10.64-17.927,13.008c-10.362,3.322-20.506-0.455-26.229-9.716
                                c-0.769-1.244-1.453-2.54-2.065-3.617c-4.55,3.71-8.829,7.476-13.399,10.848c-5.045,3.723-10.941,5.352-17.159,5.788
                                c-8.742,0.613-17.089-5.018-20.809-14.233c-5.482-13.578-3.583-26.715,3.036-39.32c8.684-16.538,21.262-28.678,40.029-32.79
                                c9.863-2.161,19.674-1.242,28.559,4.163c2.076,1.263,3.95,3.09,5.439,5.025c1.69,2.197,3.073,4.856,0.101,7.249
                                c-3.04,2.448-7.498,2.256-9.808-0.321c-1.415-1.579-2.685-3.309-4.229-4.747c-8.22-7.652-19.703-8.905-30.497-2.423
                                c-15.971,9.591-24.454,23.903-24.319,42.739c0.073,10.225,6.153,19.001,14.436,21.059c10.101,2.51,18.727-0.571,25.721-8.127
                                c0.724-0.782,0.754-2.476,0.654-3.71c-0.785-9.607-1.567-19.232,1.803-28.527c0.954-2.632,2.382-5.307,4.262-7.344
                                c3.868-4.189,9.08-2.894,9.994,2.713c0.723,4.436,0.716,9.318-0.38,13.645c-1.543,6.094-4.147,11.97-6.797,17.709
                                c-1.16,2.513-1.133,4.282,0.278,6.506c5.203,8.2,18.152,11.001,27.878,5.802c9.371-5.01,15.559-13.14,20.876-22
                                c0.763-1.271,0.734-3.134,0.74-4.724c0.054-13.5,0.011-27.001,0.041-40.501c0.013-5.744,0.84-11.922-8.372-11.987
                                c-0.116-0.517-0.233-1.034-0.349-1.552c1.177-0.638,2.342-1.301,3.535-1.909c2.442-1.245,4.899-2.461,7.349-3.69
                                c4.245-2.13,7.749-1.051,9.122,3.443c1.041,3.405,1.581,7.098,1.58,10.663c-0.007,20.24-0.263,40.48-0.372,60.721
                                c-0.011,2.007,0.396,4.016,0.608,6.025C333.395,499.987,333.855,500.082,334.315,500.177z M267.025,489.446
                                c3.93-6.608,5.806-13.703,5.736-21.243c-0.013-1.405-1.033-2.8-1.588-4.2c-1.092,1.041-2.641,1.883-3.199,3.158
                                C264.805,474.404,265.709,481.918,267.025,489.446z"/>
                            <path d="M517.628,474.7c-1.645,3.982-3.109,8.051-4.968,11.93c-5.396,11.26-11.674,21.917-23.087,28.184
                                c-2.992,1.643-6.451,2.896-9.819,3.301c-9.159,1.099-15.845-2.804-18.35-11.746c-2.129-7.603-3.775-15.678-3.626-23.506
                                c0.242-12.66,2.131-25.289,3.328-37.93c0.023-0.247,0.03-0.53,0.153-0.729c1.189-1.94,2.231-5.284,3.648-5.454
                                c1.986-0.238,4.578,1.542,6.286,3.13c1.071,0.996,1.619,3.339,1.338,4.883c-2.89,15.837-3.455,31.734-1.782,47.728
                                c0.039,0.373,0.038,0.753,0.111,1.118c2.387,12.027,11.408,15.739,21.653,8.934c9.897-6.574,16.082-16.214,21.76-26.276
                                c0.771-1.366,1.501-2.756,2.249-4.135C516.891,474.32,517.26,474.51,517.628,474.7z"/>
                            <path d="M458.566,401.149c0.126-8.496,4.932-13.342,12.581-12.621c0.967,0.091,1.969,0.353,2.847,0.766
                                c4.302,2.023,6.401,9.047,4.628,15.267c-1.494,5.238-6.119,8.506-11.162,7.886C461.668,411.736,458.469,407.673,458.566,401.149z"
                                />
                        </g>
                    </svg>
                </div>
            </div>
        </div>
只要可以深入到所处的环境,相信美好一定会从那里产生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言