CSS3制作动画加载页面

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的,我简单的说一下吧,这种效果就是浏览器加载你的页面时,给页面的内容赋予一个动画效果,让他不在那么生硬。最早看过这种效果是小志Blog首页。今天特意看了一下志哥的写的代码,才知道实现起来并不是很困难的事情,不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说,我直接使用firebug把志哥的Blog首页代码扒出来,下面我分为两部分:

HTML markup

				<div class="box">
					<div id="nav">
						<a title="林小志的个人工作学习博客日志" href="http://blog.linxz.de/">小志博客</a> - <a title="林小志在flickr上的照片" href="http://www.linxz.de/my_flickr_photo.php">小志照片</a> -
						<a title="林小志编写的第一本技术类书籍——《CSS那些事儿》" href="http://blog.linxz.de/css_book/">《CSS那些事儿》</a> -
						<a title="添翼地带为你解决CSS布局网站在各个浏览器中的兼容问题,并提供各类模板下载,在CSS能实现的前提下,只有你想不到的,没有你要不到的页面!" href="http://www.linxz.de/tianyizone/">添翼地带</a> - <a title="林小志的个人代码demo测试列表页面" href="http://lab.linxz.de">linxz's lab</a> - <a title="自制的几个关于CSS的小工具,比如图片垂直水平居中、背景透明文本不透明等" href="http://www.linxz.de/css_tool/">CSS小工具</a> - <a title="乱写盒子,方便与他人交流xhtml+css问题" href="http://box.linxz.de/">乱写盒子</a>
					</div>
					<div class="linxz_copy">
						<a target="_blank" href="http://www.miibeian.gov.cn">浙ICP备<span style="font-family:Georgia;font-size:11px">08014068</span>号</a>
					</div>
				</div>
			

上面就是所有的html代码了,实在是简洁吧,

2、CSS Code

首先我把所运用到的CSS代码Copy到这里

				body {
					font-size:12px;
					font-family:"microsoft Yahei",Simsun,Arial,"Lucida Grande",tahoma;margin:0;background:#F8F8F8;
				}
				.box {
					position:absolute;
					width:100%;
					height:70px;
					top:39%;
				}
				a {
					color:#333;
					text-decoration:none;
					-moz-transition:color 500ms linear;
					-webkit-transition:color 500ms linear;
				}
				a:hover {color:#f00;}
				#nav {
					display:block;
					height:30px;
					overflow:hidden;
					margin:0 auto 10px;
					line-height:30px;
					text-align:center;
					background:#222;
					color:#fff;
					-moz-animation-name: my_nav;
					-moz-animation-duration: 500ms;
					-moz-animation-timing-function: ease-out;
					-webkit-animation-name: my_nav;
					-webkit-animation-duration: 500ms;
					-webkit-animation-timing-function: ease-out;
				}
				@-moz-keyframes my_nav {
					0% {width:0%;opacity:0;
						-moz-border-radius:15px;
						border-radius:15px;
					}
						70% {width:10%;
						-webkit-border-radius:15px;
						border-radius:15px;
					}
					80% {width:40%;}
					90% {width:70%;}
					100% {width:100%;opacity:1;
						-moz-border-radius:0;
						border-radius:0;
					}
				}
				@-webkit-keyframes my_nav {
					0% {width:0%;opacity:0;
						-webkit-border-radius:15px;
						border-radius:15px;
					}
						70% {width:10%;
						-webkit-border-radius:15px;
						border-radius:15px;
					}
					80% {width:40%;}
					90% {width:70%;}
					100% {width:100%;opacity:1;
						-webkit-border-radius:0;
						border-radius:0;
					}
				}
				#nav a {color:#fff;}
				#nav a:hover {color:#A8FF00;}
				img {border:0 none;}
				.linxz_copy {width:100%;height:30px;margin:0 auto;text-align:center;} 
			

代码是全部在了,不过我想有很多童鞋还不了解怎么实现的吧。不要急,要是您还不清楚怎么实现的,继续往下看,看后你肯定也会认为原来就是这么简单的呀。

仔细阅读志哥写的代码,我发现实现效果有两个关键之处是不可少的:

1、创建动画效果

在这里志哥主要运用了CSS3AnimationKeyframes创建了一个叫“my_nav”动画效果:

				@-moz-keyframes my_nav {
					0% {width:0%;opacity:0;
						-moz-border-radius:15px;
						border-radius:15px;
					}
						70% {width:10%;
						-webkit-border-radius:15px;
						border-radius:15px;
					}
					80% {width:40%;}
					90% {width:70%;}
					100% {width:100%;opacity:1;
						-moz-border-radius:0;
						border-radius:0;
					}
				}
				@-webkit-keyframes my_nav {
					0% {width:0%;opacity:0;
						-webkit-border-radius:15px;
						border-radius:15px;
					}
						70% {width:10%;
						-webkit-border-radius:15px;
						border-radius:15px;
					}
					80% {width:40%;}
					90% {width:70%;}
					100% {width:100%;opacity:1;
						-webkit-border-radius:0;
						border-radius:0;
					}
				}
			

有关于“Keyframes”的具体使用,我在此就不多说了,你如果想了解更详细的内容,不仿点击

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/page-transitions-with-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部