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

这篇文章主要介绍原生JS+CSS怎么实现炫酷重力模拟弹跳系统的登录页面，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

十余年的赤坎网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整赤坎建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“赤坎网站设计”,“赤坎网站推广”以来，每个客户项目都认真落实执行。

效果图：

不过在看代码之前呢，大家先和小颖看看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) 改为内部阴影。	测试

怎么实现的呢，哈哈哈，代码看这里：




 
 梦幻登录
 
 * {
  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 h4 {
  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;
 }

User Login

/*背景渐变*/ /*function(){} 匿名函数 ()() IIFE匿名函数立刻执行，函数自执行体*/ (function() { var timer = null; //声明定时器 var oImg = document.querySelectorAll('#bg_wrap div') //h6最新元素获取写法获取到的是一组元素 //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毫秒之后再执行方法里的代码 } })()

以上是“原生JS+CSS怎么实现炫酷重力模拟弹跳系统的登录页面”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

本文题目：原生JS+CSS怎么实现炫酷重力模拟弹跳系统的登录页面
当前路径：http://cxhlcq.com/article/pcccep.html

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

其他资讯

网站制作

企业服务

网站建设

服务器托管