没有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 width: 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