原生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 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
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
php获取新浪微博数据API实例
2013/11/12 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
超市营业员岗位职责
2013/12/20 职场文书
售后服务承诺书范文
2014/03/26 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
装修施工安全责任书
2014/07/24 职场文书
离职证明标准格式
2014/09/15 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
小区保洁员岗位职责
2015/04/10 职场文书