登录页面动画效果-html代码-BFW代码库

登录页面动画效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
body {
  background: linear-gradient(135deg, #4D4E63, #333342);
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.login {
  width: 420px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login:before {
  content: "";
  position: absolute;
  background: transparent;
  bottom: 45px;
  right: 40px;
  width: 55px;
  height: 55px;
  z-index: 5;
  transition: all .6s ease-in-out, background 0s ease;
}
.login .form {
  display: block;
  position: relative;
}
.login .form h2 {
  background: #f5f5fa;
  display: block;
  bo.........完整代码请登录后点击上方下载按钮下载查看