原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面


Posted in Javascript onNovember 01, 2017

今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。

效果图:

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

不过在看代码之前呢,大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。

1.opacity

CSS3 opacity 属性

实例

设置一个div元素的透明度级别:

div
{
opacity:0.5;
}

在此页底部有更多的例子。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持opacity属性。.

注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)

属性定义及使用说明

Opacity属性设置一个元素了透明度级别。

默认值: 1
继承: no
版本: CSS3
JavaScript 语法: object.style.opacity=0.5

语法

opacity: value|inherit;

描述
value 指定不透明度。从0.0(完全透明)到1.0(完全不透明)
inherit Opacity属性的值应该从父元素继承

2.transition

作用:将元素从一种样式逐渐改变为另一种的效果。

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

语法

transition: property duration timing-function delay;

描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

3.box-shadow

作用:给元素添加阴影效果。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

怎么实现的呢,哈哈哈,代码看这里:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>梦幻登录</title>
 <style type="text/css">
 * {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 body {
  overflow: hidden;
 }
 #bg_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
 }
 #bg_wrap div {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  /* 设置透明度 */
  transition: opacity 3s;
 }
 /* nth-of-type(1) *筛选选择器选择第一个*/
 #bg_wrap div:nth-of-type(1) {
  opacity: 1;
 }
 #Login {
  width: 272px;
  height: 300px;
  margin: 200px auto;
 }
 #Login .move {
  position: absolute;
  top: -100px;
  z-index: 999;
 }
 #Login h3 {
  width: 270px;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  font-family: '微软雅黑';
  text-align: center;
  margin-bottom: 30px;
  cursor: move;
  /* top: 100px; */
 }
 /* #username {
  top: 170px;
 }
 #password {
  top: 225px;
 } */
 #Login input.text {
  width: 270px;
  height: 42px;
  color: #fff;
  background: rgba(45, 45, 45, 0.15);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 1.0) inset;
  text-indent: 10px;
 }
 #Login input.btn {
  /* top: 280px; */
  background: #ef4300;
  width: 272px;
  height: 44px;
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
  /* -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2); */
  border: 0;
  text-align: center;
 }
 /* #Login input.focus {
  outline: none;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
 } */
 input::-webkit-input-placeholder {
  color: #fff;
 }
 </style>
</head>
<body>
 <div id="bg_wrap">
  <div><img src="images/1.jpg" width="100%" height="100%"></div>
  <div><img src="images/2.jpg" width="100%" height="100%"></div>
  <div><img src="images/3.jpg" width="100%" height="100%"></div>
 </div>
 <div id="Login">
  <h3 id="title" class="move">User Login</h3>
  <form action="#" method="post" target="_blank">
   <input type="text" placeholder="UserName" name="username" id="username" class="text move">
   <input type="password" placeholder="PassWord" name="password" id="password" class="text move">
   <input type="submit" value="Sign in" class="btn move" id="submit">
  </form>
 </div>
 <script type="text/javascript">
 /*背景渐变*/
 /*function(){} 匿名函数
  ()()   IIFE匿名函数立刻执行,函数自执行体*/
 (function() {
  var timer = null; //声明定时器
  var oImg = document.querySelectorAll('#bg_wrap div') //h5最新元素获取写法获取到的是一组元素
  //querySelector获取单个元素的 兼容ie8
  var len = oImg.length; //3
  var index = 0;
  timer = setInterval(function() {
   oImg[index].style.opacity = 0;
   index++;
   // if(index>=3){
   // index=0;
   // }
   index %= len; //index=index%len求模取余 0%3=0; 1%3=1; 2%3=2; 3%3=0;
   oImg[index].style.opacity = 1;
  }, 2000);
 })();
 // 重力模拟弹跳系统
 (function() {
  /*
  改变定位元素的top值
  达到指定位置之后进行弹跳一次
  多个元素一次运动
  动画序列*/
  var oMove = document.querySelectorAll('.move');
  var oLen = oMove.length;
  var timer = null;
  var timeout = null;
  var speed = 3; //移动距离
  move(oLen - 1);
  function move(index) {
   if (index < 0) {
    clearInterval(timer); //清除循环定时器
    clearTimeout(timeout); //清除延时定时器
    return; //终止函数
   }
   var endTop = 150 + (index * 60); //根据下标计算endTop值
   timer = setInterval(function() {
    speed += 3;
    var T = oMove[index].offsetTop + speed; //设置每一次的top值
    if (T > endTop) {
     T = endTop;
     speed *= -1 //取反,让移动距离变为负数
     speed *= 0.4;
     //慢慢停下来
    }
    oMove[index].style.top = T + 'px';
   }, 20);
   timeout = setTimeout(function() {
    clearInterval(timer);
    index--;
    console.log(9);
    move(index);
    console.log(index);
   }, 900) //过900毫秒之后再执行方法里的代码
  }
 })()
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
bootstrap Table的一些小操作
Nov 01 #Javascript
react-native fetch的具体使用方法
Nov 01 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
flask中过滤器的使用详解
2018/08/01 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
环保建议书作文
2014/03/12 职场文书
党员大会主持词
2014/04/02 职场文书
村长贪污检举信
2014/04/04 职场文书
邀请函的格式
2015/01/30 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python