登录页面-科技感动效

VIP文章闪闪发光惹人爱~

已于 2023-06-14 16:01:11 修改

阅读量601

点赞数

分类专栏： # login-01 CSS Vue 文章标签：科技 css html

于 2023-05-31 17:07:58 首次发布

本文链接：https://blog.csdn.net/qq_43210656/article/details/130973151

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>login登录动效</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				margin: 0;
				overflow: hidden;
				background: linear-gradient(to bottom, #19778c, #095f88);
				background-size:1400% 300%;
				animation: dynamics 6s ease infinite;
				-webkit-animation: dynamics 6s ease infinite;
				-moz-animation: dynamics 6s ease infinite;
				font-size: 14px;
				color: #ffffff;
				min-height: 700px;
			}
			/*登录样式*/
			.main {
				position: fixed;
				text-align: center;
				top: 182px;
				width: 100%;
				height: auto;
				display: flex;
				justify-content: center;
			}
			.login {
				width: 470px;
				height:470px;
				background: linear-gradient(to bottom, #19778c, #095f88);
				animation: dynamics 6s ease infinite;
				-webkit-animation: dynamics 6s ease infinite;
				-moz-animation: dynamics 6s ease infinite;
				opacity: 0.9;
				border: solid 1px #13a1fc;
				background-size:1400% 300%;
			}
			@keyframes dynamics {
				0% {
					background-position: 0% 0%;
				}
				50% {
					background-position: 50% 100%;
				}
				100% {
					background-position: 100% 0%;
				}
			}
			.log-con {
				background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top,
				linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top,
				linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom,
				linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom;
				background-repeat: no-repeat;
				background-size: 3px 20px, 20px 3px;
				height: 100%;
				margin: -2px;
				padding: 3px 1px 1px 0;
				border-radius: 3px;
			}
			.log-con >span {
				font-size: 30px;
				font-weight: bold;
				line-height: 24px;
				letter-spacing: 2px;
				display: block;
				m