CSS3制作动画加载页面

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

小志博客首页

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

HTML markup

<div class="box">
    <div id="nav">
        <a title="林小志的个人工作学习博客日志" href="https://www.qdskill.com/go.php?url=http://blog.linxz.de/" target='_blank'>小志博客</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”的具体使用,我在此就不多说了,你如果想了解更详细的内容,不仿点击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效果的制作思路是来自于esecamalichSergio Camalichtympanus上写的Page Transitions with CSS3,另外配合Daniel EdenAnimate.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效果只运用了CSS3transition属性制作动画效果:

.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 EdenAnimate.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效果,那就拼命点击这里下载吧!

原文链接:https://www.w3cplus.com/css3/page-transitions-with-css3

发表评论

登录后才能评论