CSS3制作动画加载页面
作者：大漠 日期：2012-03-20 点击：3833
今天主要想和大家一起探讨一下如何使用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
