1. 软件系统定制开发效果图展示
2. 代码
2.1 HTML部分
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div class="container"> <div class="box"> <div class="transtion-box"> <div class="login-box"> <h1>欢迎回来</h1> <section> <label for="email">邮箱</label> <input type="text" id="email" /> </section> <section> <label for="password">密码</label> <input type="password" id="password" /> <span>忘记密码?</span> </section> <button type="button">登录</button> <button type="button" class="other"> 使用<span style="font-weight: 900; color: #455a81">二维码</span >扫码登录 </button> </div> <div class="reg-box" style="display: none"> <h1>立即注册</h1> <section> <label for="username">用户名</label> <input type="text" id="username" /> </section> <section> <label for="email">邮箱</label> <input type="text" id="email" /> </section> <section> <label for="password">密码</label> <input type="password" id="password" /> </section> <button type="button">注册</button> <button type="button" class="other"> 使用<span style="font-weight: 900; color: #455a81">二维码</span >扫码注册 </button> </div> </div> <div class="transferToReg"> <h1 class="title">还未注册？</h1> <span class="subTitle">立即注册，发现大量机会！</span> <button type="button" id="transfetBtn">注册</button> </div> </div> </div> </body> <script> let transfer = document.getElementById('transfetBtn'); transfer.addEventListener('click', function () { let login = document.querySelector('.login-box'); let reg = document.querySelector('.reg-box'); let total = document.querySelector('.transtion-box'); let target = document.querySelector('.transferToReg'); let title = document.querySelector('.title'); let subTitle = document.querySelector('.subTitle'); transfer.innerText === '注册' ? (() => { target.style.left = 0; total.style.left = 260 + 'px'; transfer.innerText = '登录'; title.innerText = '已有帐号？'; subTitle.innerText = '有帐号就登录吧，好久不见了！'; setTimeout(() => { login.style.display = 'none'; reg.style.display = 'flex'; }, 300); })() : (() => { target.style.left = 640 + 'px'; total.style.left = 0; transfer.innerText = '注册'; title.innerText = '还未注册？'; subTitle.innerText = '立即注册，发现大量机会！'; setTimeout(() => { login.style.display = 'flex'; reg.style.display = 'none'; }, 300); })(); }); </script></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
2.2 CSS部分
* { margin: 0; padding: 0; box-sizing: border-box;}body { width: 100%; height: 100%;}.container { width: 100%; height: 100vh; background-color: #ededed; display: flex; justify-content: center; align-items: center;}.container .box { width: 900px; height: 550px; background: #fff; border-radius: 4px; position: relative;}.container .box .transtion-box { position: absolute; left: 0; transition: 0.5s all ease-in-out;}.container .box .transtion-box .login-box,.reg-box { width: 640px; height: 100%; display: flex; flex-flow: column nowrap; align-items: center; padding: 50px 30px;}.container .box .transtion-box h1 { margin-bottom: 35px;}.container .box .transtion-box section { display: flex; flex-flow: inherit; align-items: inherit; width: 100%; margin-bottom: 30px;}.container .box .transtion-box section label { font-size: 14px; color: #909399; text-transform: uppercase; margin-bottom: 8px;}.container .box .transtion-box section input { width: 50%; outline: 0; border: none; font-size: 18px; color: tomato; text-align: center; padding: 4px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.4);}.container .box .transtion-box section span { color: rgb(80, 80, 77); font-size: 15px; cursor: pointer; margin-top: 18px;}.container .box .transtion-box button { width: 50%; padding: 6px 0; text-align: center; border: 3px solid #d4af7a; border-radius: 20px; background: #d4af7a; color: #fff; font-size: 17px; letter-spacing: 6px; text-indent: 6px; margin-bottom: 15px; cursor: pointer;}.container .box .transtion-box .other { border: 3px solid #d3dae9; background: #fff; color: rgb(124, 145, 184); font-weight: 600;}.container .box .transferToReg { width: 260px; height: 100%; background: linear-gradient( to bottom right, #0e92eb 0%, #5f90ec 50%, #b08fe5 100% ); border-top-right-radius: 4px; border-bottom-right-radius: 4px; position: absolute; left: 640px; top: 0; display: flex; flex-flow: column nowrap; align-items: center; padding: 50px 0; color: white; transition: all 1s ease-in-out;}.container .box .transferToReg .title { margin-bottom: 10px; transition: all 0.3s ease-in-out;}.container .box .transferToReg button { margin-top: 260px; width: 50%; padding: 8px 0; border-radius: 14px; letter-spacing: 10px; text-indent: 10px; font-size: 18px; color: #fff; border: 3px solid #fff; background: transparent; font-weight: 700; cursor: pointer;}.container .box .transferToReg button:hover { border: 3px solid #206dfc;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
