Question

我正在尝试为油漆罐制作动画，以向前倾斜并溢出油漆。我总共有7张图片需要动画。当我通过CSS做到这一点。

它使第一张图像倍增，然后使其变大，以便动画基本上丢失。为什么css会这样做......附带一个小提琴。

...谢谢

<!DOCTYPE html>
<htmL>
<head>
    <link rel="stylesheet" type="text/css" href="groupx.css">
 <!--  <script src="menuMotion.js"></script> -->
</head>
<body>
    <div class="slider"></div>

</body>
</htmL>

现在是CSS

body{
    width: 960px;
    height: auto;
    margin: 0;
    padding: 0;

}
img{
    width: 100px;
    height: 200px;
}
.slider{

        width: 400px;
        height: 600px;
        background: url(images/blpc1v4.png);
        animation: slide 5s ;
        overflow: hidden;
        position: absolute;
}
@keyframes slide{

    20%{
        background: url(images/blpc2v3.png);
    }
    38%{
        background: url(images/blpc2v3.png);
    } 
    53%{
        background: url(images/blpc4v3.png);
    } 
    71%{
        background: url(images/blpc5v3.png);
    } 
    90%{
        background: url(images/blpc6v3.png);
    }
    100%{
        background: url(images/blpc7v3.png);
    }
}

我实际上并没有使用JS代码，我只是包含它，paint可以是一个菜单选项 - ＆gt;为什么有一个eventlistener附加到它。

document.images[i].addEventListener('click', animateDropmenu, false);

var frame = 0;
var images = [];
var time = 3000;

images [0] = 'images/blpc1v3.png';
images [1] = 'images/blpc2v3.png';
images [2] = 'images/blpc3v3.png';
images [3] = 'images/blpc4v3.png';
images [4] = 'images/blpc5v3.png';
images [5] = 'images/blpc6v3.png';
images [6] = 'images/blpc7v3.png';

function animateDropmenu(){

    document.slide.src = images[0];
    if (frame < images.length - 1){
        frame++;
    }
    else{
        frame = 0;
    }
}

https://jsfiddle.net/e2571er0/

Answer 1

添加

 background-repeat:no-repeat;
 background-size:cover !important;

到CSS中的.slider类。

动画导航菜单

1 个答案: