采用CSS3设计的登录界面,动态效果(动画)

这篇博客介绍了如何使用CSS3来设计一个带有动画效果的登录界面。样式中包含了CSS3的动画元素,实现了背景颜色的渐变效果,以及登录窗口随着位置移动而逐渐放大的动态效果。提供了几幅效果图展示设计成果。
摘要由CSDN通过智能技术生成

与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素。

style内容如下:

<style>
			html,body,div{
				margin:0;
				padding:0;
				font-size:100%;
			}
			html{
				//background:url('./6.jpg') no-repeat;
				//background-size:cover;
				background:#45b97c;
				animation:bganimation 5s;
			}
			#loginForm{
				height:200px;
				width:350px;
				position:absolute;
				top:50%;
				left:50%;
				margin:-100px 0 0 -175px;
				box-shadow:0px 0px 25px 12px #c0c0c0;
				border:6px solid;
				border-color:#c0c0c0;
				border-radius:12px;
				animation:loginanimation 5s;
			}
			@keyframes bganimation{
				0% {background:#deab8a;}
				10% {background:#f7acbc;}
				20%{background:#987165;}
				30%{background:#e0861a;}
				40%{background:#00ae9d;}
				50%{background:#008792;}
				60%{background:#7f7522;}
				70%{background:#f173ac;}
				80%{backgrou
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值