采用CSS3设计的登录界面，动态效果（动画）

最新推荐文章于 2024-06-02 11:25:18 发布

xuyongsky1234

最新推荐文章于 2024-06-02 11:25:18 发布

阅读量3k

点赞数

分类专栏： HTML5+CSS3学习随记 web前端-学习随记文章标签：动画 login css3 3d 设计

本文链接：https://blog.csdn.net/u012688910/article/details/41344633

版权

这篇博客介绍了如何使用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