目录
第一步:编写
第二步:设置css样式表
第三步:编写js代码
第一步:编写框架
1.分别新建html,css和js文档后,将css和jsapp开发定制公司分别链接至html中。
2.编写html基本框架。
app开发定制公司效果可参照示例图一
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>动态的登陆背景</title>
- <link rel="stylesheet" href="./css/登录界面.css">
- </head>
- <body>
- <div class="container">
- <h1>Welcome</h1>
- <div class="form">
- <input type="text" placeholder="您的账号">
- <input type="password" placeholder="您的密码">
- <button class="btn-login">登录</button>
- </div>
- </div>
- <ul class="bg-squares">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </body>
- </html>
- <script src="./js/登录界面.js"></script>
示例图一
第二步:编写css样式表
1.首先设置一个渐变背景
2.将框架中的十个点变成大小不一的方块并添加动画,可参照示例图二。
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body{
- height: 100vh;
- /* 弹性布局 居中显示 */
- display: flex;
- justify-content: center;
- align-items: center;
- /* 渐变背景 */
- background: linear-gradient(to top left,#ffe29f,#ffa99f,#ff719a);
- /* 溢出隐藏 */
- overflow: hidden;
- }
- .container{
- text-align: center;
- color: #fff;
- }
- .container h1{
- font-size: 40px;
- font-weight: 100;
- letter-spacing: 2px;
- margin-bottom: 15px;
- /* 过渡效果 */
- transition: 1s ease-in-out;
- }
- .form{
- display: flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- z-index: 2;
- opacity: 1;
- /* 不透明度改变时的过渡效果 */
- transition: opacity 0.5s;
- }
- .form input{
- outline: none;
- border: 1px solid rgba(255, 255, 255, 0.4);
- background-color: rgba(255, 255, 255, 0.2);
- width: 250px;
- padding: 10px 15px;
- border-radius: 3px;
- margin: 0 auto 10px auto;
- text-align: center;
- color: #fff;
- font-size: 15px;
- transition: 0.25s;
- }
- .form input::placeholder{
- color: #fff;
- font-size: 14px;
- font-weight: 300;
- }
- .form input:hover{
- background-color: #fff;
- }
- .form input:focus{
- background-color: #fff;
- width: 300px;
- color: #ff719a;
- }
- .btn-login{
- outline: none;
- background-color: #fff;
- color: #ff719a;
- border: none;
- width: 250px;
- padding: 10px 15px;
- border-radius: 3px;
- font-size: 15px;
- cursor: pointer;
- transition: 0.25s;
- }
- .btn-login:hover{
- background-color: #f5f7f9;
- }
- /* 背景方块*/
- .bg-squares{
- list-style: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
- .bg-squares li{
- width: 40px;
- height: 40px;
- background-color: rgba(255, 255, 255, 0.15);
- position: absolute;
- bottom: -160px;
- /* 执行动画:动画名 时长 线性 无限次播放*/
- animation: squres 2s linear infinite ;
- }
- /* 为每一个方块设置不同的位置、大小、动画延迟时间、动画时长、背景色 */
- .bg-squares li:nth-child(1){
- left: 10%;
- }
- .bg-squares li:nth-child(2){
- left: 20%;
- width: 80px;
- height: 80px;
- /* 动画延迟时间 */
- animation-delay:2s;
- /* 动画时长 */
- animation-duration: 17s;
- }
- .bg-squares li:nth-child(3){
- left: 25%;
- animation-delay: 4s;
- }
- .bg-squares li:nth-child(4){
- left: 40%;
- width: 60px;
- height: 60px;
- background-color:rgba(255, 255, 255, 0.25) ;
- animation-duration: 22s;
- }
- .bg-squares li:nth-child(5){
- left: 70%;
- }
- .bg-squares li:nth-child(6){
- left: 80%;
- width: 120px;
- height:120px;
- background-color:rgba(255, 255, 255, 0.2) ;
- animation-delay: 3s;
- }
- .bg-squares li:nth-child(7){
- left: 32%;
- width: 160px;
- height: 160px;
- animation-delay: 7s;
- }
- .bg-squares li:nth-child(8){
- left: 55%;
- width: 20px;
- height: 20px;
- animation-delay: 15s;
- animation-duration: 40s;
- }
- .bg-squares li:nth-child(9){
- left: 25%;
- width: 10px;
- height: 10px;
- background-color: rgba(255, 255, 255, 0.3);
- animation-delay: 2s;
- animation-duration: 40s;
- }
- .bg-squares li:nth-child(10){
- left: 90%;
- width: 160px;
- height: 160px;
- animation-delay: 11s;
- }
- .container.success h1{
- transform: translateY(75px);
- }
- .container.success .form{
- opacity: 0;
- }
- /*定义动画*/
- @keyframes squres{
- 0%{
- transform: translateY(0);
- }
- 100%{
- transform: translateY(-120vh) rotate(600deg);
- }
- }
示例图二
此时如果不添加js代码,登陆键点完后没有动画;所以需要编写js代码,使画面看起来更高级。
- //要操作的按钮
- const container=document.querySelector('.container');
- const btn_login=document.querySelector('.btn-login');
-
- //登录按钮点击事件
- btn_login.addEventListener('click',function(){
- container.classList.add('success');
- })
示例图三
可以看到编译js代码,则可以产生这样的动画。
好了,到此就结束了。