基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。

实现的代码。

html代码:

<div class="htmleaf-container">
        <div class="wrapper">
            <div class="container">
                <h1>Welcome</h1>

                <form class="form">
                    <input type="text" placeholder="Username">
                    <input type="password" placeholder="Password">
                    <button type="submit" id="login-button">Login</button>
                </form>
            </div>

            <ul class="bg-bubbles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script>
        $(‘#login-button‘).click(function (event) {
            event.preventDefault();
            $(‘form‘).fadeOut(500);
            $(‘.wrapper‘).addClass(‘form-success‘);
        });
    </script>

源码下载

时间: 2024-08-06 02:58:21

基于CSS3动态背景登录框代码的相关文章

用duilib制作仿QQ2013动态背景登录器

转载请说明原出处,谢谢~~ 在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景. 去年的QQ2013的登陆界面就是动态界面,上篇博客我说道了,Duiengine已经有高人做好了仿QQ界面的代码,我这里只是把QQ2013的动态登陆界面制作出来.而QQ2014又换了全新的界面,不过熟悉UI制作的朋友知道,模仿 QQ2014的登陆界面比QQ2013的还要简单.可以看到QQ2013

css3 动态背景

动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.其中的80% 20%为渐变中心的x,y位置. 具体的radial-gradient用法可以参见这里 .dynbg__bg{ position: absolute; top: 0px; left: 0px; width:100%; height:100%; background:-moz-radial-gradient(8

jquery css3动态背景用户登录界面特效

@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300); * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } body ::-webkit-input-p

用JS动态创建登录表单,报了个小错误

后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各位仁兄美眉们一定要小心了额. 下面是这段js动态创建登录框的js代码: 1 onload = function () { 2 var dvObj = document.createElement('div'); 3 dvObj.style.border = 'Red 1px solid'; 4 dv

8个非常个性化的CSS3单/复选框

单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery的,你可以挑选喜欢的单选框和复选框应用到自己的网页中去,非常方便. 1.jQuery超级个性化的单线框和复选框 今天要分享的也是一个非常个性化的单选框和复选框插件,颜色你可以自己定义. 在线演示 源码下载 2.CSS3漂亮的自定义Checkbox复选框 9款迷人样式 今天我们来分享一款9款样式迷人的

JQuery+CSS3实现封装弹出登录框效果

原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个项目,但是由于不使用Bootstrap自带的JS插件,所以这个弹出登录框就自己实现封装来调用,做出来的效果其实和Bootstrap自带的效果差不多.OK,看一下效果图: 其实很简单,首先是html结构: <div id="mask"></div> <!-- 半

基于css3的环形动态进度条(原创)

基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquery可以在网站中动态改变加载的百分比.同时,用如果单纯用css3的animation的话扩展性太差,因为你要先确定出百分比是多少,而如果百分比超过一半时,左边的半圆也需转动,单纯用animation就太复杂了. 另外,svg和canvas都可以实现这样的效果.canvas的话我感觉原理应该差不多.有人

基于bootstrap后台登录界面代码

分享一款基于bootstrap后台登录界面代码.这是一款基于基于bootstrap和css3实现的自适应移动端优先的登录界面代码.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="signin"> <div class="signin-head"><img src="images/test/head_120.png" alt="" class=&qu

如何用css3实现动态下拉框

* { margin: 0px; padding: 0px; font-family: "微软雅黑"; list-style: none; text-decoration: none } .test { width: 200px; height: 20px; background-color: greenyellow } .test:hover { height: 200px; background-color: green } 例如上面就是一个动态下拉框(虽然我添加了transiti