css3实现动画效果

一、动画效果的常用属性

实现动画效果需要借助css3的下列属性：transform,transion,animation（具体可以参见教材）

二、动画效果实例

　　1）文字闪烁的动画效果

/*文字的闪烁效果*/

@-webkit-keyframes blink{

    0%{

        opacity:0;

    }40%{

        opacity:.3;

    }50%{

        opacity:.8;

    }55%{

        opacity:.3;

    }60%{

        opacity:.8;

    }100%{

        opacity:0;

    }

}

文字闪烁css代码

 .mingpian p{

    color:#89919a;

    line-height:2.1;

    margin-left:45px;

    -webkit-animation:blink 3s ease backwards;     

 }

文字闪烁css使用

/*使用这种方法加载动画，在页面加载或者刷新的时候，动画显现*、

    <div class="mingpian">

                <h2>我的名片</h2>

                <p>网名：DanceSmile | 即步非烟</p>

                <p>职业：Web前端设计师、网页设计</p>

                <p>电话：13662012345</p>

                <p>Email：[email protected]</p>

                <ul class="social-link">

                    <li><a href="/" class="talk" title="给我留言"></a></li>

                    <li><a href="/" class="address" title="联系地址"></a></li>

                    <li><a href="/" class="email" title="给我写信"></a></li>

                    <li><a href="/" class="photos" title="生活照片"></a></li>

                    <li><a href="/" class="heart" title="关注我"></a></li>                

                </ul>

            </div>

文字闪烁html代码

 

　　2）图像水平翻转的动画效果

/*图片向上翻转的动画效果*/

 @-webkit-keyframes pageTop { 0% {

opacity: 0;

-webkit-transform: perspective(400px) rotateX(90deg);

}

 100% {

opacity: 1;

-webkit-transform: perspective(400px) rotateX(0deg);

}

}

图像水平翻转的css动画定义

 /*图片部分*/

 .banner figure{    

    width:630px; 

    height:250px; 

    position:relative;  

    float:left; 

    margin:0; 

    position:relative;

    -webkit-animation:pageTop 6s ease backwards;

 }

图像水平翻转动画应用

    <figure>

                <img src="images/art.jpg" alt="banner-img"/>

                <figcaption>

                    <h4>

                        渡人如渡己，渡已，亦是渡

                    </h4>

                    <p>

                        当我们被误解时，会花很多时间去辩白。 但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。

                    </p>

                </figcaption>

            </figure>

图像水平翻转html代码

 

　　3）加载的动画效果（若干圆圈由小变大）

/*loading animation*/

 

@-webkit-keyframes bounce_fountainG { 

0% {

-webkit-transform:scale(1);

background-color:#92DCE0;

}

 100% {

-webkit-transform:scale(.3);

background-color:#FFFFFF;

}

}

加载的动画定义

.about ul{

    padding:0;

    margin:0;

    list-style:none;

    position:relative;     

    height:29px;

    line-height:29px;

    margin-top:20px;

}

 

.about .fountainG>li{

    position:absolute;

    width:29px;

    height:29px;

    top:0;

    border-radius:19px;

    background-color:#92DCE0;

    -webkit-animation: bounce_fountainG 1.2s linear infinite; 

    /*刚开始是缩放状态*/

    -webkit-transform:scale(.3);

    }

.fountainG>li:first-child{

    left:0;

    -webkit-animation-delay:0.48s;    

}

.fountainG>li:nth-child(2){

    left:30px;

    -webkit-animation-delay:0.6s;

}

.fountainG>li:nth-child(3){

    left:60px;

    -webkit-animation-delay:0.72s;

}

.fountainG>li:nth-child(4){

    left:90px;

    -webkit-animation-delay:0.84s;

}

.fountainG>li:nth-child(5){

    left:120px;

    -webkit-animation-delay:0.96s;

}

.fountainG>li:nth-child(6){

    left:150px;

    -webkit-animation-delay:1.08s;

}

.fountainG>li:nth-child(7){

    left:180px;

    -webkit-animation-delay:1.20s;

}

.fountainG>li:nth-child(8){

    left:210px;

    -webkit-animation-delay:1.32s;

}

加载的动画样式

 

                <ul class="fountainG">

                  <li></li>

                  <li></li>

                  <li></li>

                  <li></li>

                  <li></li>

                  <li></li>

                  <li></li>

                  <li></li>

                </ul>

加载的html代码