原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
脚本之家 2017-11-28 1258
效果图：
不过在看代码之前呢，大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。
1.opacity
CSS3 opacity 属性
实例
设置一个div元素的透明度级别：
1 2 3 4 | 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) 改为内部阴影。 | 测试 |
怎么实现的呢，哈哈哈，代码看这里：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | <!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实现登录与注册界面
下一篇：js前端导出Excel的方法
