Question

如何将像圆圈这样的HTML元素视为弹跳，就像移动多次一样？只有CSS3可以吗？

Answer 1

是的，您需要使用关键帧动画才能执行此操作。这是一个简单的例子：

<强> HTML：

<div class="bounce"></div>

<强> CSS：

@-webkit-keyframes hop {
       from{
        -webkit-transform: translate(0px,0px);
        }


         to {
        -webkit-transform: translate(0px,-30px);
        }  
      }

@-moz-keyframes hop {
       from{
        -moz-transform: translate(0px,0px);
        }


         to {
        -moz-transform: translate(0px,-30px);
        }  
      }

.bounce{
    display:block;
    height:200px;
    width:200px;
    background:#ff6600;
    border-radius:300px;
    margin-top:100px;
-webkit-animation-name: hop;
    -webkit-animation-duration:.3s;
     -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name: hop;
    -moz-animation-duration:.3s;
     -moz-animation-direction:alternate;
    -moz-animation-timing-function:linear;
    -moz-animation-delay:0s;
    -moz-animation-iteration-count:infinite;
}

为你的观赏乐趣提供一个小提琴：http://jsfiddle.net/hpBhf/1/

Answer 2

我认为最简单的方法是使用animate.css，支持很多不同的动画，如果你想快速添加动画，这是一个非常好的选择，这里是通过动画开发的简单游戏.css，http://www.gbin1.com/technology/democenter/20120812-animate-css/index.html

使用Css3的简单动画

2 个答案: