CSS动态渐变背景

最新推荐文章于 2024-06-20 11:21:40 发布

兰颜

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量873

点赞数 1

分类专栏： css

本文为博主原创文章，未经博主允许请勿转载。

本文链接：https://blog.csdn.net/qq_39704057/article/details/119644898

版权

css

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果：

代码：

	<div class="flex h-full items-center justify-around login-wrap">
		<el-card class="box-card">
			<div class="tyg-div-form">
				<h2 style="text-align: center; font-size:22px;" class="mb-4">欢迎访问 官网后台</h2>
				<el-form :model="ruleForm" label-width="100px"
					class="demo-ruleForm pr-14">
					<el-form-item label="用户名" prop="pass">
						<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="age">
						<el-input v-model="ruleForm.age"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="w-full" @click="submitForm('ruleForm')">立即登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>

	.login-wrap{
	  margin: 0;
	  padding: 0;
	  font-family: "montserrat";
	  /* background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: 400%; */
		background-image: linear-gradient(125deg,#4facfe,#a1c4fd,#c2e9fb,#C2FFD8);  background-size: 400%;
	  animation: bganimation 15s infinite;
	}	 
	@keyframes bganimation {
	  0%{
	    background-position: 0% 50%;
	  }
	  50%{
	    background-position: 100% 50%;
	  }
	  100%{
	    background-position: 0% 50%;
	  }
	}