原生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 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JsDom 编程小结
2011/08/09 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python基于socket函数实现端口扫描
2020/05/28 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
自我评价怎么写好呢?
2013/12/05 职场文书
采购内勤岗位职责
2013/12/10 职场文书
21岁生日感言
2014/02/27 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
新人入职感言
2015/07/31 职场文书
话题作文之自信作文
2019/11/15 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL