给谁加这个动画

来源:1-2 CSS3能做什么?

_吴先生_2

2016-07-08 15:01

@-webkit-keyframes run {

    0% {   -webkit-transform:rotateX(0deg) rotateY(0deg) rotatez(0deg) ;}

    25% {  -webkit-transform:rotateX(30deg)  rotateY(30deg) rotatez(30deg) ; }

    50% {  -webkit-transform:rotateX(0deg)  rotateY(0deg) rotatez(0deg) ; }

    75% {  -webkit-transform:rotateX(-30deg)  rotateY(-30deg) rotatez(-30deg) ; }

    100% { -webkit-transform:rotateX(0deg)  rotateY(0deg) rotatez(0deg) ; }


}


写回答 关注

2回答

  • weibo_哆啦A梦有大口袋_0
    2016-07-12 11:26:06
    #doraemon{
    position:absolute;
    left:50px;
    top:50px;
    width:400px;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
         transform-style: preserve-3d;
      -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
         -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
              transform: rotateX(0) rotateY(0) rotateZ(0);
      /*引用动画 run*/
      -webkit-animation: run 5s infinite linear;
    -moz-animation: run 5s infinite linear;
     animation: run 5s infinite linear;
    }
    /*声明动画 run*/
    @-webkit-keyframes run {
      0% {   -webkit-transform:rotateX(0) rotateY(0) rotatez(0) ;}
      25% {  -webkit-transform:rotateX(30deg)  rotateY(30deg) rotatez(30deg) ; }
      50% {  -webkit-transform:rotateX(0deg)  rotateY(0deg) rotatez(0) ; }
      75% {  -webkit-transform:rotateX(-30deg)  rotateY(-30deg) rotatez(-30deg) ; }
      100% { -webkit-transform:rotateX(0deg)  rotateY(0) rotatez(0) ; }
    }

    这里是给#doraemon添加动画,等你按顺序把第九章学完,你就明白了

    出于对回答者的认同和尊重,解决了你的问题,请采纳,谢谢

  • 黑色秋水
    2016-07-08 15:13:50

    最外层需要运动的div#doraemon。

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242553 学习 · 2623 问题

查看课程

相似问题