Question

我是新手..我想在瓶子上盘旋并让瓶子旋转。同时我想展示倾倒和水坑的动画。我不知道如何通过单个悬停开始多个动画。这是它的CSS：

/*CSS ANIMATION*/

@-webkit-keyframes bottle {
0% {
    height: 67px;
}
7% {
    height: 67px;
}
95% {
    height: 0px;
}
100% {
    height: 0;
}
}


@-moz-keyframes bottle {
0% {
    height: 67px;
}
7% {
    height: 67px;
}
95% {
    height: 0px;
}
100% {
    height: 0;
}
 }

#bottle {
position: absolute;
top: 1055px;
right: 490px;
-webkit-transition: all .2s linear;
}

#bottle:hover {
-moz-transform: rotate(165deg);
-webkit-transform: rotate(165deg);
transform: rotate(165deg);
-webkit-transition: all .2s linear;
}

@-webkit-keyframes pour {
0% {
    background-position: 0 0;
    height: 0;
}
5% {
    background-position: 0 0;
    height: 0;
}
10% {
    background-position: 0 0;
    height: 75px;
    width: 4px;
}
95% {
    background-position: 0 0;
    height: 120px;
    width: 4px;
}
100% {
    background-position: 0 0;
    height: 170px;
    width: 4px;
}
}

@-webkit-keyframes puddle {
10% {
    height: 30px;
}
15% {
    height: 30px;
}
98% {
    height: 50px;
}
100% {
    height: 0;
}
}

#pour {
position: relative;
right: -55px;
top: -25px;

}

#puddle {
position: relative;
top: -50px;
opacity: 1;
right: -20px;
}

#contents1:hover {
-moz-animation: bottle 5s linear 1 forwards;
-webkit-animation: bottle 5s linear 1 forwards;
animation: bottle 5s linear 1 forwards;
}

#contents2:hover {
display: block;
-moz-animation: pour 2s linear 1;
-webkit-animation: pour 2s linear 1;
animation: pour 2s linear 1;
}

#contents3:hover {
-moz-animation: puddle 10s linear 1;
-webkit-animation: puddle 10s linear 1;
animation: puddle 10s linear 1;
}

现在我需要知道如何将contents2:hover和contents3:hover与bottle:hover联系起来。我的意思是只是悬停在瓶子上，我怎样才能设置content2和contents3？

正如你们要求我已经将所有内容上传到JSFiddle ..这是链接http://jsfiddle.net/shettyrahul8june/8tkKK/2/

全屏jsfiddle.net/shettyrahul8june/8tkKK/2/embedded/result /

由于某些原因，both.png没有显示在编辑器链接中，但在全屏幕中工作正常..这是图像的链接s26.postimg.org/s07bc6gvp/bottle.png ....我想要的是旋转和倾倒液体然后来到水坑..所有应该发生单瓶悬停..我不是简单地依靠人..我努力工作，但无法正确...此外，如果有人可以说明如何保持网页的分辨率，这将是一个很大的帮助..希望我是准确的..请帮助，因为许多人正在寻找这个，这可能是他们的终极止步.. < / p>

Answer 1

您正在寻找CSS中的Tilde ~选择器

Working Demo 和 Source

<强> CSS

#bottle:hover ~ #pour {
    display: block;
    -moz-animation: pour 2s linear 1;
    -webkit-animation: pour 2s linear 1;
    animation: pour 2s linear 1;
}
#bottle:hover ~ #puddle {
    -moz-animation: puddle 10s linear 1;
    -webkit-animation: puddle 10s linear 1;
    animation: puddle 10s linear 1;
}

多种悬停效果

1 个答案: