原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
网络编程 发布日期：2025/11/6 浏览次数：1
今天小编把之前保存的js特效视频看了一遍，跟着视频敲了敲嘻嘻，用原生js实现一个炫酷的登录页面。怎么个炫酷法呢，看看下面的图片大家就知道啦。
效果图：
不过在看代码之前呢，大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。
1.opacity
CSS3 opacity 属性
实例
设置一个div元素的透明度级别：
div
{
opacity:0.5;
}
在此页底部有更多的例子。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持opacity属性。.
注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)
属性定义及使用说明
Opacity属性设置一个元素了透明度级别。
语法
opacity: value|inherit;
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-* 属性来构造漂亮的可伸缩按钮！
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
怎么实现的呢，哈哈哈，代码看这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梦幻登录</title>
<style type="text/css">
* {
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 h3 {
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;
}
</style>
</head>
<body>
<div id="bg_wrap">
<div><img src="/UploadFiles/2021-04-02/1.jpg">
总结
以上所述是小编给大家介绍的原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！