CSS3简单登录界面效果特效代码

CSS3简单登录界面效果特效代码

这是一款简洁时尚的CSS3用户登录界面设计代码。该用户登录界面的布局不依赖于网格系统,并通过简单的CSS样式来对界面进行美化,效果时尚大方。

使用方法
在页面引入相关CSS样式style.css、reset.css文件

1
2
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css"/>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="particles-js">
  <div class="login">
      <div class="login-top">
          登录
      </div>
      <div class="login-center clearfix">
          <div class="login-center-img"><img src="img/name.png"/></div>
          <div class="login-center-input">
              <input type="text" name="" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
              <div class="login-center-input-text">用户名</div>
          </div>
      </div>
      <div class="login-center clearfix">
          <div class="login-center-img"><img src="img/password.png"/></div>
          <div class="login-center-input">
              <input type="password" name=""value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
              <div class="login-center-input-text">密码</div>
          </div>
      </div>
      <div class="login-button">
          登陆
      </div>
  </div>
  <div class="sk-rotating-plane"></div>
</div>

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function hasClass(elem, cls) {
  cls = cls || '';
  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}
 
function addClass(ele, cls) {
  if (!hasClass(ele, cls)) {
    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
  }
}
 
function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
      newClass = newClass.replace(' ' + cls + ' ', ' ');
    }
    ele.className = newClass.replace(/^\s+|\s+$/g, '');
  }
}
    document.querySelector(".login-button").onclick = function(){
            addClass(document.querySelector(".login"), "active")
            setTimeout(function(){
                addClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "none"
            },800)
            setTimeout(function(){
                removeClass(document.querySelector(".login"), "active")
                removeClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "block"
                alert("登录成功")
               
            },5000)
    }

文件信息:

    1

    发表评论