原生js+css实现重力模拟弹跳系统的登录页面

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

效果图：

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

1.opacity

作用：设置一个元素的透明度

定义和用法

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，就不会产生过渡效果。

默认值：	all 0 ease 0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transition="width 2s"

语法

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) 改为内部阴影。	测试

亲自试一试 - 实例

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

    
    
    



    

        

        

        

    
    

        
User Login
        

            
            
            
        
    
    

 git地址

转载于:https://www.cnblogs.com/yingzi1028/p/7763450.html