CSS3制作动画加载页面

来源：http://www.w3cplus.com/css3/page-transitions-with-css3

今天主要想和大家一起探讨一下如何使用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、创建动画效果

在这里志哥主要运用了CSS3中Animation的Keyframes创建了一个叫“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”的具体使用，我在此就不多说了，你如果想了解更详细的内容，不仿点击animation。

2、调用动画

创建好动画后，就是调用动画，那么如何调用刚才创建的“my_nav”动画呢？我们还是来一起来看志哥是怎么调用的吧：

#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; } 

大家看后是不是觉得做起来并不复杂吧。那我们就一起现学现卖吧，我下面做了几个DEMO效果：

DEMO一：

第一个DEMO是在志哥的基础上配合Daniel Eden写的Animate.css效果，在“nav”的"box"上增加了一个旋转的“rotateIn”效果。

在完成这个效果，需要创建这个“rotateIn”动画，那么这个动画我直接使用了Daniel Eden中的Animate.css的代码：

@-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; }  100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; }  100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateIn { 0% { -ms-transform-origin: center center; -ms-transform: rotate(-200deg); opacity: 0; }  100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; }  100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; }  100% { transform-origin: center center; transform: rotate(0); opacity: 1; } }  .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } 

创建完以后，我在“div.box”悬停下时调用这个动画效果：

.box:hover { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; -moz-animation-duration: 1s; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-timing-function: ease; -webkit-animation-timing-function: ease; -o-animation-timing-function: ease; -ms-animation-timing-function: ease; animation-timing-function: ease; } 

其他DEMO效果

我在后面还做了三个DEMO,这三个DEMO效果的制作思路是来自于esecamalich的Sergio Camalich在tympanus上写的Page Transitions with CSS3，另外配合Daniel Eden的Animate.css制作出来的新效果。下面我们一起来看看是如何制作。

HTML Markup

后面三个DEMO效果，都采用的是同一个HTML结构：

<!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home -->  <!-- Portfolio --> <div id="portfolio" class="panel"> <div class="content"> <h2>Portfolio</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /Portfolio -->  <!-- About --> <div id="about" class="panel"> <div class="content"> <h2>About</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /About -->  <!-- Contact --> <div id="contact" class="panel"> <div class="content"> <h2>Contact</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /Contact --> <!-- Header with Navigation --> <div id="header"> <h1>Page Transitions with CSS3</h1> <ul id="navigation"> <li><a id="link-home" href="#home">Home</a></li> <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li> <li><a id="link-about" href="#about">About Me</a></li> <li><a id="link-contact" href="#contact">Contact</a></li> </ul> </div> 

CSS Code

接下来简单的写一下这几个DEMO一起用到的样式代码：

html, body { height:100%; } body { width: 100%; background: #ffcb00; overflow: hidden; } #header{ position: absolute; z-index: 2000; width: 235px; top: 50px; } #header h1{ font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000; } #navigation { margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3; } #navigation a{ color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px; } #navigation a:hover { background: #ddd; } .content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; } .content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px; } .panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #000; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2; } 

接下来是最关键之处了，我们分别每个DEMO来看看他们的效果实现代码：

DEMO 二：

这个DEMO效果只运用了CSS3的transition属性制作动画效果：

.panel { -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } 

上面的代码仅仅是在“div.panel”上有一个动画效果，那么要怎么触发这个效果呢？这里运用的是伪元素“:target”。使用这个主要是当你点击了左边导航对应的我链接时，那么对应的“panel”将被触发，触发后有一个关键值的改变，那就是“margin-top”的值。页面载入时，“div.panel”的“margin-top”默认值是：

.panel{ margin-top: -150%; } 

当“panel”点击触发后，“div.panel”值将改变为“0”

.panel:target{ margin-top: 0%; background-color: #ffcb00; } 

此时你每点击左边导航，右边内容对应的“panel”块将会以动画效果加载，为了让你的页面更完美一点，现将导航点击后的效果使用“:target”来触发：

#home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact{ background: #000; color: #fff; } 

到此这个效果就算是完成了。不过这个效果还是相对的简单，下面两个DEMO将有一些不同之处。要是感兴趣就请继续往下看吧。

DFEMO 三

这个效果运用的代码和DEMO中是一样的，只是在“div.panel”的运用上做了一定的修改，下面一起来看吧。

首先调用了Daniel Eden的Animate.css效果中的“flip”：

@-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-ms-keyframes flip { 0% { -ms-transform: perspective(400px) rotateY(0); -ms-animation-timing-function: ease-out; } 40% { -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-animation-timing-function: ease-out; } 50% { -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-animation-timing-function: ease-in; } 80% { -ms-transform: perspective(400px) rotateY(360deg) scale(.95); -ms-animation-timing-function: ease-in; } 100% { -ms-transform: perspective(400px) scale(1); -ms-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } 

下面是改变的关键之处：

1、在"div.panel"中不在加有“tranisiton”属性：

.panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #87cfe6; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2;	 } 

2、在“div.panel”点击下，使用“:target”触发前面创建的“flip”动画效果：

.panel:target{ margin-top: 0%; background-color: #87cfe6; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -ms-backface-visibility: visible !important; -ms-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; -moz-animation-duration: 1s; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-timing-function: ease; -webkit-animation-timing-function: ease; -o-animation-timing-function: ease; -ms-animation-timing-function: ease; animation-timing-function: ease; } 

DEMO 四

DEMO四的效果和DEMO三的效果虽然不一样，但制作方法可以说是完全一样，唯一不同的是创建的动画效果不一，此例采用的是Animate.css的“bounceInUp”效果，接下来就只要触发这个动画效果就OK了。

bounceInUp动画效果代码：

@-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); }  60% { opacity: 1; -webkit-transform: translateY(-30px); }  80% { -webkit-transform: translateY(10px); }  100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); }  60% { opacity: 1; -moz-transform: translateY(-30px); }  80% { -moz-transform: translateY(10px); }  100% { -moz-transform: translateY(0); } } @-ms-keyframes bounceInUp { 0% { opacity: 0; -ms-transform: translateY(2000px); }  60% { opacity: 1; -ms-transform: translateY(-30px); }  80% { -ms-transform: translateY(10px); }  100% { -ms-transform: translateY(0); } }  @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); }  60% { opacity: 1; -o-transform: translateY(-30px); }  80% { -o-transform: translateY(10px); }  100% { -o-transform: translateY(0); } }  @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); }  60% { opacity: 1; transform: translateY(-30px); }  80% { transform: translateY(10px); }  100% { transform: translateY(0); } }  

触发动画

.panel:target{ margin-top: 0%; background-color: #B1E583; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flip; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; -moz-animation-duration: 1s; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-timing-function: ease; -webkit-animation-timing-function: ease; -o-animation-timing-function: ease; -ms-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } 

那么到这里所有动画效果就算完成了，如果您喜欢的可以自己动手一试，试过之后，你就会觉得并不难，而且会让你觉得这样效果实现起来很爽。如果你喜欢上面的DEMO效果，那就拼命点击这里下载吧！

最后希望大家喜欢这篇教程。如果您有更好的效果或建议请在下面的评论中与我一起分享和学习。

如需转载烦请注明出处：W3CPLUS