前端之家收集整理的这篇文章主要介绍了
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
今天小编把之前保存的js特效视频看了一遍，跟着视频敲了敲嘻嘻，用原生js实现一个炫酷的登录页面。怎么个炫酷法呢，看看下面的图片大家就知道啦。
不过在看代码之前呢，大家先和小颖看看css中的opacity、transition、Box-shadow这三个属性。
1.opacity
CSS3 opacity 属性
实例
设置一个div元素的透明度级别：
在此页底部有更多的例子。
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持opacity属性。.
注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)
属性定义及使用说明
Opacity属性设置一个元素了透明度级别。
|
|
|
| object.style.opacity=0.5
语法
opacity: value|inherit;
|
value属性的值应该从父元素继承
2.transition
作用：将元素从一种样式逐渐改变为另一种的效果。
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
语法
transition: property duration timing-function delay;
|
效果需要多少秒或毫秒。效果何时开始。
3.Box-shadow
作用：给元素添加阴影效果。
Box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
|
|
|
| .style.BoxShadow="10px 10px 5px #888888"
语法
Box-shadow: h-shadow v-shadow blur spread color inset;
注释：Box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
|
|
怎么实现的呢，哈哈哈，代码看这里：
< Meta charset="utf-8">
梦幻<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>
总结
以上所述是小编给大家介绍的原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 原文链接：https://www.f2er.com/js/35428.html | | | | |
