微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：JavaScript作者：编程之家

今天小编把之前保存的js特效视频看了一遍，跟着视频敲了敲嘻嘻，用原生js实现一个炫酷的登录页面。怎么个炫酷法呢，看看下面的图片大家就知道啦。

效果图：

不过在看代码之前呢，大家先和小颖看看css中的opacity、transition、Box-shadow这三个属性。

1.opacity

CSS3 opacity 属性

实例

设置一个div元素的透明度级别：

rush:css;"> div { opacity:0.5; }

在此页底部有更多的例子。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持opacity属性。.

注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

属性定义及使用说明

Opacity属性设置一个元素了透明度级别。

gino Sans GB","Microsoft YaHei","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,sans-serif; border-right: 0px; width: 729px; white-space: normal; word-spacing: 0px; border-collapse: collapse; border-bottom: 0px; text-transform: none; font-weight: normal; color: rgb(51,51,51); padding-bottom: 0px; font-style: normal; padding-top: 0px; padding-left: 0px; margin: 4px 0px; border-left: 0px; orphans: 2; widows: 2; letter-spacing: normal; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px"> ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px">
ottom: rgb(212,212) 1px solid; padding-bottom: 7px; text-align: left; padding-top: 7px; padding-left: 5px; margin: 0px; border-left: rgb(212,212) 1px solid; padding-right: 5px">默认值： ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px"> ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px"> ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px"> object.style.opacity=0.5

语法

opacity: value|inherit;

ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px"> ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px; background-color: rgb(246,244,240)">
ottom: rgb(85,85) 1px solid; color: rgb(255,255); padding-bottom: 3px; text-align: left; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: rgb(85,85) 1px solid; padding-right: 3px; background-color: rgb(85,85)">值 ottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px; background-color: rgb(255,255)"> ottom: rgb(212,212) 1px solid; padding-bottom: 7px; padding-top: 7px; padding-left: 5px; margin: 0px; border-left: rgb(212,212) 1px solid; line-height: 2em; padding-right: 5px">valueottom: 0px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; padding-right: 0px; background-color: rgb(246,240)"> 属性的值应该从父元素继承

2.transition

作用：将元素从一种样式逐渐改变为另一种的效果。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法

transition: property duration timing-function delay;

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; font-weight: normal; color: rgb(0,0); padding-bottom: 0px; font-style: normal; text-align: left; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: silver 1px solid; orphans: 2; widows: 2; letter-spacing: normal; padding-right: 0px; background-color: rgb(254,254,242); text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">
ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">值 ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">描述 ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">规定完成过渡效果需要多少秒或毫秒。ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">定义过渡效果何时开始。

3.Box-shadow

作用：给元素添加阴影效果。

定义和用法

Box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">
ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">默认值： ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">noneottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">继承性： ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">noottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">版本： ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">CSS3ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">JavaScript 语法： ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">object.style.BoxShadow="10px 10px 5px #888888"

语法

Box-shadow: h-shadow v-shadow blur spread color inset;

注释：Box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">
ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">值 ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">描述 ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">测试 ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">h-shadowottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">必需。水平阴影的位置。允许负值。ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">blurottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">可选。模糊距离。ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">colorottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">可选。阴影的颜色。请参阅 CSS 颜色值。ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">

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

rush:css;"> <Meta charset="utf-8"> 梦幻<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>

总结

以上所述是小编给大家介绍的原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/js/35428.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

css弹跳系统登录页面js

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot