简单CSS/HTML的动画登录注册网页[拳皇]

今天我们学习了过渡与动画效果，接下来将结合此方法呈现出来一个简单的CSS/HTML的登录注册网页。
*同页面切换登录注册哦~

页面截图

方法原理

[1]. 定义动画 @keyframes
[2].调用方法

基础代码如下

//形式一  关键词：0% 和 100%
@keyframes animation{0%{//动画的开始....}100%{//动画的结束...}
}
//形式二  关键词：from 和 to
@keyframes animation{from{//动画的开始....}to{//动画的结束...}
}

同一页面切换盒子

此处的js代码用于在同一页面切换登录注册盒子。

注意要配合css中的display语句使用

//css代码
<style>
.login{display: block;}
.register{display: none;}
</style>//js代码
<script type="application/javascript" >window.onload=function () {let as=document.getElementsByClassName('content-header')[0].getElementsByTagName('a');let contents=document.getElementsByClassName("dom");for (let i=0;i<as.length;i++){let a=as[i];a.id=i;a.onclick=function () {for(let j=0;j<as.length;j++){as[j].className="";contents[j].style.display="none";}this.className='current';contents[this.id].style.display='block';}}}
</script>

动画效果

这里的动画效果需要一个连续的图片，如果有想放的图片可以把Gif图片按帧分解然后拼成一行连续的图片，建议按帧分解的图片数量不要超过20张，会难以拼图哦~

//定义动画代码
.left-people{width:450px;height: 450px;position: relative;top: -710px;left:20px;background-image: url('./img/left.png');animation-name: test1;//为动画命名为test1animation-timing-function: steps(16,end);//按帧分解的图片数量为16animation-iteration-count: infinite;//检索或设置对象向动画的循环次数，infinite的含义是无穷这个参数，所以动画可以不停的去执行animation-duration: 1s;//时间间隔为1s
}
//调用动画方法test1
@keyframes test1{from{background-position: 0 0;}to{background-position: -8000px 0;//此处的8000px是图片的总长度}
}

代码

css代码

<style>
.box{width: 100%;height: 100%;position: absolute;z-index: -1;background: no-repeat;
}
.login,.register{width: 460px;height: 250px;border: 1px solid gainsboro;border-radius: 10px;/* background-color: rgba(255, 255, 255, 0.5); */position: relative;top: -480px;right: -370px;/* display: block; */
}
.login{display: block;}
.register{display: none;}.Picture{position: relative;top: 8px;left: 10px;
}
.login_right{width: 263px;height: 207px;background-color: rgba(255, 255, 255, 0.5);border-radius: 5px;position: relative;top: -220px;right: -190px;
}
.header {font-size: 18px;font-weight: bold;text-align: center;}
.input-item {display: block;width: 220px;height: 10px;margin-left: 10px;margin-bottom: 30px;border: 0;padding: 10px;border-radius: 5px;font-size: 10px;outline: none;}
.input-item:placeholder {text-transform: uppercase;}
.btn{text-align: center;padding: 10px;width: 220px;height: 8px;margin-top: 30px;margin-left: 10px;/* background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); */background-image: url('./img/btn.JPG');border-radius: 5px;color: #fff;}
.btn:hover{box-shadow: 0px 0px 5px 5px rgb(206, 179, 57);
}
.input-item:hover{box-shadow: 0px 0px 5px 5px rgb(206, 179, 57);
}
.text{margin-top: -10px;
}
.left-people{width:450px;height: 450px;position: relative;top: -710px;left:20px;background-image: url('./img/left.png');animation-name: test1;animation-timing-function: steps(16,end);animation-iteration-count: infinite;animation-duration: 1s;
}
@keyframes test1{from{background-position: 0 0;}to{background-position: -8000px 0;}
}.right_people{width:290px;height: 284px;position: relative;top: -1050px;right: -900px;background-image: url('./img/right_people.png');animation-name: test2;animation-timing-function: steps(15,end);animation-iteration-count: infinite;animation-duration: 1s;
}
@keyframes test2{from{background-position: 0 0;}to{background-position: -4350px 0;}
}
.juzi{font-size:10px;color: #fff;position: relative;bottom:220px;left:150px;
}
.content-header{position: fixed;top:20px;margin-left:20px;color: #fff;font-size: 12px;
}
a{color: #fff;text-decoration: none;
}
a:hover{color:yellow;
}
</style>

js代码

<script type="application/javascript" >window.onload=function () {let as=document.getElementsByClassName('content-header')[0].getElementsByTagName('a');let contents=document.getElementsByClassName("dom");for (let i=0;i<as.length;i++){let a=as[i];a.id=i;a.onclick=function () {for(let j=0;j<as.length;j++){as[j].className="";contents[j].style.display="none";}this.className='current';contents[this.id].style.display='block';}}}
</script>

body布局


<body><!--主体--><div class="box"><img src="./img/Login1.JPG" width="1200px" height="100%"><div class="on"><div class="login dom"><div class="login_left"><div class="Picture"><img src="./img/login3.jpg"></div></div><div class="login_right"><div class="title"><div class="header"><p>Login</p></div><div class="form-wrapper"><input type="text" name="username" placeholder="username"  class="input-item"><input type="password" name="password" placeholder="password" class="input-item"><div class="btn"><p class="text">Login - Let's play game!</p></div></div></div></div><div class="juzi"><p><i>It's a fun game.You can join us!</i></p></div></div><div class="register dom"><div class="login_left"><div class="Picture"><img src="./img/login2.jpg"></div></div><div class="login_right"><div class="title"><div class="header"><p>Register</p></div><div class="form-wrapper"><input type="text" name="username" placeholder="username"  class="input-item"><input type="password" name="password" placeholder="password" class="input-item"><div class="btn"><p class="text">Register - Let's play game!</p></div></div></div></div><div class="juzi"><p><i>You can start a fun game now!</i></p></div></div><div class="bottom"><div class="left-people"></div><div class="right_people"></div></div><div class="content-header"><a href="javaScript:;" class="current">我要登录</a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="javaScript:;" >我要注册</a></div>  </div>
</body>

简单CSS/HTML的动画登录注册网页[拳皇]相关推荐

一个简单的登录注册网页的实现
一个简单的登录注册网页的实现通过标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
html5/css登录注册网页模板
html5/css登录注册网页模板免费下载地址:https://www.html5tricks.com/9-useful-html5-css3-login-form.html
使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
java简单小程序_Java简易登录注册小程序
这篇文章主要介绍了Java图形界面开发,简易登录注册小程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的 ...
java对mysql的简单操作的综合运用——登录+注册+修改密码
本篇博客是java对mysql的简单操作的综合运用--登录系统.java对mysql的简单操作的综合运用--注册系统.java对mysql的简单操作的综合运用--修改密码系统的整合. 因为使用的是数据 ...
【HTML,CSS,JS】选项卡+登录注册界面
选项卡+登录注册界面源码 HTML CSS JavaScript 效果源码 HTML <!DOCTYPE html> <html><head><meta ...
使用nodejs、express以及MySQL制作一个简单类淘宝的登录注册页面
项目搭建参考自原文地址:https://jimmyhjh.com/nodejs-express-MySQL-4177adf369dc46d7983138b891d582c9 一.通过MySQL建立数 ...
HTML+CSS+JS实现个人相册登录注册
一.任务一完成<个人相册>项目登录页面要求: 使用正则表达式验证邮箱密码长度至少为6位且为字母与数字的组合二.任务二完成<个人相册>项目注册页面要求: 使用正则表达 ...
HTML、CSS、js幻灯片登录/注册表单
html代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...

简单CSS/HTML的动画登录注册网页[拳皇]

简单CSS/HTML的动画登录注册网页[拳皇]

页面截图

方法原理

同一页面切换盒子

动画效果

代码

简单CSS/HTML的动画登录注册网页[拳皇]相关推荐

最新文章

热门文章