• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3 简单动画:翻页效果

    CSS3 简单动画:翻页效果

    作者: 分类:HTML5与CSS3.0 点击: 6,112 次
    wordpress CMS主题:ssmay主题

      目前,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我们可以做出各式各样的动画,这里只是一个简单翻页动画效果,你可以根据自己的需求来进行修改。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.