没有ui，无奈只能自己上手设计页面。自己写了一个，半仿照其他demo写的，原demo很炫酷，我这个不炫酷也不丑吧
贴图：
（星星每隔3秒改变颜色，有动画运动）
贴代码：
1 <template> 2 <div id="login"> 3 <div id="bgd"> 4 <canvas 5 id='myCanvas' 6 :width='width' 7 :height='height' 8 > 9 </canvas> 10 </div> 11 <div id="loginBox"> 12 <h4>登录</h4> 13 <el-form 14 :model="loginForm" 15 :rules="loginRules" 16 ref="loginForm" 17 label-width="0px" 18 > 19 <el-form-item 20 label="" 21 prop="userName" 22 style="margin-top:40px;" 23 > 24 <el-row> 25 <el-col :span='2'> 26 <span class="iconfont"></span> 27 </el-col> 28 <el-col :span='22'> 29 <el-input 30 class="inps" 31 placeholder='用户名' 32 v-model="loginForm.userName" 33 ></el-input> 34 </el-col> 35 </el-row> 36 </el-form-item> 37 <el-form-item 38 label="" 39 prop="passWord" 40 > 41 <el-row> 42 <el-col :span='2'> 43 <span class="iconfont"></span> 44 </el-col> 45 <el-col :span='22'> 46 <el-input 47 class="inps" 48 placeholder='密码' 49 v-model="loginForm.passWord" 50 ></el-input> 51 </el-col> 52 </el-row> 53 </el-form-item> 54 <el-form-item style="margin-top:55px;"> 55 <el-button 56 type="primary" 57 round 58 class="submitBtn" 59 @click="submitForm" 60 >登录</el-button> 61 </el-form-item> 62 </el-form> 63 </div> 64 </div> 65 </template> 66 67 <script> 68 export default { 69 data() { 70 return { 71 canvas: null, 72 context: null, 73 stars: [], //星星数组 74 shadowColorList: [ 75 "#39f", 76 "#ec5707", 77 "#b031d4", 78 "#22e6c7", 79 "#92d819", 80 "#14d7f1", 81 "#e23c66" 82 ], //阴影颜色列表 83 directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向 84 speed: 50, //星星运行速度 85 last_star_created_time: new Date(), //上次重绘星星时间 86 Ball: class Ball { 87 constructor(radius) { 88 this.x = 0; 89 this.y = 0; 90 this.radius = radius; 91 this.color = ""; 92 this.shadowColor = ""; 93 this.direction = ""; 94 } 95 96 draw(context) { 97 context.save(); 98 context.translate(this.x, this.y); 99 context.lineWidth = this.lineWidth; 100 var my_gradient = context.createLinearGradient(0, 0, 0, 8); 101 my_gradient.addColorStop(0, this.color); 102 my_gradient.addColorStop(1, this.shadowColor); 103 context.fillStyle = my_gradient; 104 context.beginPath(); 105 context.arc(0, 0, this.radius, 0, Math.PI * 2, true); 106 context.closePath(); 107 108 context.shadowColor = this.shadowColor; 109 context.shadowOffsetX = 0; 110 context.shadowOffsetY = 0; 111 context.shadowBlur = 10; 112 113 context.fill(); 114 context.restore(); 115 } 116 }, //工厂模式定义Ball类 117 window.innerWidth, 118 height: window.innerHeight, 119 loginForm: { 120 userName: "", 121 passWord: "" 122 }, 123 loginRules: { 124 userName: [ 125 { required: true, message: "请输入用户名", trigger: "blur" } 126 ], 127 passWord: [{ required: true, message: "请输入密码", trigger: "blur" }] 128 } 129 }; 130 }, 131 methods: { 132 //提交登录 133 submitForm() {}, 134 //重复动画 135 drawFrame() { 136 let animation = requestAnimationFrame(this.drawFrame); 137 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 138 this.createStar(false); 139 this.stars.forEach(this.moveStar); 140 }, 141 //展示所有的星星 142 createStar(params) { 143 let now = new Date(); 144 if (params) { 145 //初始化星星 146 for (var i = 0; i < 50; i++) { 147 const radius = Math.random() * 3 + 2; 148 let star = new this.Ball(radius); 149 star.x = Math.random() * this.canvas.width + 1; 150 star.y = Math.random() * this.canvas.height + 1; 151 star.color = "#ffffff"; 152 star.shadowColor = this.shadowColorList[ 153 Math.floor(Math.random() * this.shadowColorList.length) 154 ]; 155 star.direction = this.directionList[ 156 Math.floor(Math.random() * this.directionList.length) 157 ]; 158 this.stars.push(star); 159 } 160 } else if (!params && now - this.last_star_created_time > 3000) { 161 //每隔3秒重绘修改颜色其中30个球阴影颜色 162 for (var i = 0; i < 30; i++) { 163 this.stars[i].shadowColor = this.shadowColorList[ 164 Math.floor(Math.random() * this.shadowColorList.length) 165 ]; 166 } 167 this.last_star_created_time = now; 168 } 169 }, 170 //移动 171 moveStar(star, index) { 172 if (star.y - this.canvas.height > 0) { 173 //触底 174 if (Math.floor(Math.random() * 2) === 1) { 175 star.direction = "leftTop"; 176 } else { 177 star.direction = "rightTop"; 178 } 179 } else if (star.y < 2) { 180 //触顶 181 if (Math.floor(Math.random() * 2) === 1) { 182 star.direction = "rightBottom"; 183 } else { 184 star.direction = "leftBottom"; 185 } 186 } else if (star.x < 2) { 187 //左边 188 if (Math.floor(Math.random() * 2) === 1) { 189 star.direction = "rightTop"; 190 } else { 191 star.direction = "rightBottom"; 192 } 193 } else if (star.x - this.canvas.width > 0) { 194 //右边 195 if (Math.floor(Math.random() * 2) === 1) { 196 star.direction = "leftBottom"; 197 } else { 198 star.direction = "leftTop"; 199 } 200 } 201 if (star.direction === "leftTop") { 202 star.y -= star.radius / this.speed; 203 star.x -= star.radius / this.speed; 204 } else if (star.direction === "rightBottom") { 205 star.y += star.radius / this.speed; 206 star.x += star.radius / this.speed; 207 } else if (star.direction === "leftBottom") { 208 star.y += star.radius / this.speed; 209 star.x -= star.radius / this.speed; 210 } else if (star.direction === "rightTop") { 211 star.y -= star.radius / this.speed; 212 star.x += star.radius / this.speed; 213 } 214 star.draw(this.context); 215 } 216 }, 217 mounted() { 218 this.canvas = document.getElementById("myCanvas"); 219 this.context = this.canvas.getContext("2d"); 220 221 this.createStar(true); 222 this.drawFrame(); 223 } 224 }; 225 </script> 226 227 <style lang='less' scoped> 228 #login { 229 width: 100vw; 230 padding: 0; 231 margin: 0; 232 height: 100vh; 233 font-size: 16px; 234 background-repeat: no-repeat; 235 background-position: left top; 236 background-color: #242645; 237 color: #fff; 238 font-family: "Source Sans Pro"; 239 background-size: 100%; 240 background-image: url("../../../static/images/Starry.jpg"); 241 position: relative; 242 #bgd { 243 height: 100vh; 244 width: 100vw; 245 overflow: hidden; 246 } 247 #loginBox { 248 width: 240px; 249 height: 280px; 250 position: absolute; 251 top: 0; 252 left: 0; 253 right: 0; 254 bottom: 0; 255 margin: auto; 256 padding: 50px 40px 40px 40px; 257 box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7); 258 opacity: 1; 259 background: linear-gradient( 260 230deg, 261 rgba(53, 57, 74, 0) 0%, 262 rgb(0, 0, 0) 100% 263 ); 264 /deep/ .inps input { 265 border: none; 266 color: #fff; 267 background-color: transparent; 268 font-size: 12px; 269 } 270 .submitBtn { 271 background-color: transparent; 272 color: #39f; 273 width: 200px; 274 } 275 .iconfont { 276 color: #fff; 277 } 278 } 279 } 280 </style>
贴背景图，要的自取：
最后，贴上大神原demo网站地址：http://www.jq22.com/yanshi15518