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>

本文介绍的这款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效,希望大家可以喜欢。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索css3
背景动画
css3文字动态特效、css3动态计数器特效、css3 实现阳光特效、css3实现图片显示特效、css3实现数字动态变化,以便于您获取更多的相关知识。

时间: 2024-08-31 00:07:52

CSS3实现动态背景登录框的代码_表单特效的相关文章

得到文本框选中的文字,动态插入文字的js代码_表单特效

复制代码 代码如下: <script language="javascript" src="js/settags.js"></script>  function AppTag(tagcode)  {   document.PostMessage.Message.value += tagcode;  }  function InsertTag(tagbegin,tagend)  {   if ((document.selection)&

js 金额文本框实现代码_表单特效

案例1:回车实现Tab跳转. 响应文本框的onKeyDown事件,window.event.keyCode获得用户点击的keyCode. (*)keyCode和ASCII不是完全一致,主键盘的1和小键盘的1的ASCII一样,但是keyCode不一样.回车的keyCode为 13,Tab的keyCode为9. <body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}"> 只有少数的键才能被替换

JavaScript动态调整TextArea高度的代码_表单特效

核心代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function adjustObjHeight(obj, defaultHeight) { if(obj.scrollHeight > defaultHeight) { obj.style.height = obj.scrollHeight + 'px'; } else { obj.style.height

javascript 单选框,多选框美化代码_表单特效

crir = {     init: function() {         arrLabels = document.getElementsByTagName('label');         searchLabels:         for (var i=0; i<arrLabels.length; i++) {                         // get the input element based on the for attribute of the labe

javascript实现的左右选择框效果代码_表单特效

item 1.1 item 1.2 item 1.3 item 2.1 item 2.2 item 2.3 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

js限制文本框为整数和货币的函数代码_表单特效

限制为整数 <html> <head> <script language="javascript" type="text/javascript"> var G=document.getElementById; function checkNumber(){ var reg = /^(?:0|[1-9][0-9]?|100)$/; var strNumber = G("txtNumber").value; ale

文本框获得焦点和失去焦点的判断代码_表单特效

文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id

刷新时清空文本框内容的js代码_表单特效

在做注册页面(.htm静态格式)时, 我想在刷新时(如F5,而不是提交表单后的返回)把开始输入文本框的内容清空 要怎么做呢? 只有密码框可以,其它的框默认保留了开始输入的信息 复制代码 代码如下: <body onload="document.forms[0].reset()">

select组合框option的捕捉实例代码_表单特效

这是一份报名表单,要求用户在选中"专业人士访问员"和"定性访问员"后,分别显示"可提供被访者类型"和"容易接触到的行业"的对应表单.当呈未选中状态时,这2个框也对应的隐藏起来. html部分 复制代码 代码如下: <p> <label class="title">报名参加的兼职职位(必填项)<br/>按住Ctrl键可多选</label> <select