资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

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

效果图:

原生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(完全不透明)
inheritOpacity属性的值应该从父元素继承

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://cdkjz.cn/article/pcccep.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220