wordpress CMS主题 微信
Home > HTML5与CSS3.0 > CSS3 简单动画:翻页效果

CSS3 简单动画:翻页效果

高时银博客 HTML5与CSS3.0 点击: 2,970 次 0 0
  • 标签:
  • 目前,CSS3的一些特效功能还不能在PC端大量使用,因为,浏览器的不兼容问题的存,一些新出的CSS3特效就连一些主流浏览器也不能使用,所以,在web开发时,就考虑一下该不该使用了。不过,在手机端的WEB开发,我们可以放心大胆地使用,因为手机端的浏览器都是最新,基本都能正常支持CSS3的功能。而且,在几年后,相信那时浏览器都应该支持了。闲话不多说,进入主题。本章主要是来看一下CSS3的一个动画应用。

    下面以一个实例来进行讲解:翻页效果。效果如下图:

    CSS3 简单动画:翻页效果

    html代码:

    <div id="gao2">
    <div id="gao">
    <img src="aa.jpg" alt="">
    </div>
    </div>

    代码解说:id="gao2" 的 div 是一个外框; id="gao" 的div 是翻页。

    CSS3代码:

    @-webkit-keyframes name{
    0%{   /*  动画开始 */
    transform:rotateY(0deg);  /*  旋转0度 */
    }
    100%{ /*  动画结束 */
    transform:rotateY(-100deg);  /*  旋转到-100度  */
    }
    }
    @-moz-keyframes name{
    0%{
    transform:rotateY(0deg);
    }
    100%{
    transform:rotateY(-100deg);
    }
    }
    #gao2{
    margin:100px auto;
    width:400px;
    border:1px solid #ccc;
    perspective:1000px; /*  透视,达到3D效果  */
    }
    #gao{
    transform-origin:left; /*  动画基点,这里是以左边为基点 */
    -moz-animation:name 0.5s linear infinite 0s both;  /*  兼容火狐浏览器 */
    animation:name 2s linear 1 alternate 1s both;
    }
    img{
    width:400px;
    height:400px;
    }

    代码解说:

    @-webkit-keyframes name 和 @-moz-keyframes name 是添加关键帧,就像flash动画的关键帧一样。关键帧名叫 name,当然,你也可以叫其它的名字。webkit和moz是谷歌和火狐浏览器内核名,起到兼容做用。

    animation:name 2s linear 1 alternate 1s both; 这一句就是动画代码。animation是CSS3动画关键字,name是关键帧名,2s是动画运行时长,linear是匀速,1是运行一次,alternate 是交替运行,1s是延迟时间,both结否是否返回。

    通过CSS3我们可以做出各式各样的动画,这里只是一个简单翻页动画效果,你可以根据自己的需求来进行修改。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201512074902.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论