Question

我正在尝试为网站制作一个小动画介绍。基本上我想要一个集中的图像从顶部和底部均匀地裁剪，然后向上移动到屏幕的顶部。

到目前为止，我有以下内容：http://dk8.co/animation.html

这是使用以下CSS：

      #pic {
        position:absolute;
        top:0%;
        width: 100%;
        height: 200px;
        left: 0px;
        background:url(web/images/AM-title.jpg) no-repeat;
         -moz-background-size:100% auto;
         -webkit-background-size:100% auto;
         -webkit-background-position:0% auto;
         background-size:100% auto;
         -o-background-size: 100% auto;
        -webkit-animation-name: move;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
    }




    @-webkit-keyframes move {
    0% {
        top: 50%;
        height: 400px;
    }

        50% {
        top: 50%;
        height: 300px;
    }
}

然而，问题在于“裁剪”是从下往上而不是从上到下发生。

有没有办法在顶部和底部实现相同的裁剪效果？

Answer 1

非常简单的解决方案是将50％分配给background-position属性，或者只是将50％添加到上面的简写中：

background: url(web/images/AM-title.jpg) 50% 50% no-repeat;

以下是一个工作示例：http://jsfiddle.net/sl1dr/L3sQW/

Answer 2

我为Prototype.js写了this five years ago。您可以搜索代码并查看其工作原理。

基本上你可以同时移动元素的位置和背景位置。

从上到下均匀地裁剪图像

2 个答案: