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代码