我正在寻找悬停效果来暂停动画......
我创建了一个大小为400x400的单个div，在该div中我添加了四个大小为150x150的图像，每个图像都有一个大小为150x150的div ...
这样就可以在一个div中创建四个不同的div元素....！
现在我已经使用css3动画旋转了四个图像，并且像上面的图像一样使用-webkit帧。 现在我想在悬停时暂停这个动画，以便我可以在悬停时给每个图像一个气泡消息......
如果我将悬停暂停给div1，div2，div3，div4分开，当我只悬停时，只有特定的图像被暂停，其他三个图像继续旋转，看起来很尴尬看动画..
如果我使用暂停悬停到外部div，内部div不会受到影响，动画仍然会继续....
我只需要在我悬停在单个图像上时停止所有四个图像的动画并在取消悬停后继续旋转.....
我是css的新手，所以尊重所有你的帮助和答案......
这是我用过的代码......
`/ * css * / .div1 { 宽度：170像素; 高度：170像素; 位置：相对; 动画：myfirst 5s无限; 动画方向：备用;
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:myfirst 5s infinite;
-moz-animation-direction:alternate;
-o-animation:myfirst 5s infinite;
-o-animation-direction:alternate;
-ms-animation:myfirst 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes myfirst
{
0% { left:0px; top:0px;}
25% { left:150px; top:0px;}
50% { left:150px; top:150px;}
75% { left:0px; top:150px;}
100% { left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%
{
left:0px;
top:0px;
}
25%
{
left:170px;
top:0px;
}
50%
{
left:170px;
top:170px;
}
75%
{
left:0px;
top:170px;
}
100%
{
left:0px;
top:0px;
}
}
.div2
{
width:170px;
height:170px;
position:relative;
animation:myfourth 5s infinite;
animation-direction:alternate;
-webkit-animation:myfourth 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:myfourth 5s infinite;
-moz-animation-direction:alternate;
-o-animation:myfourth 5s infinite;
-o-animation-direction:alternate;
-ms-animation:myfourth 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes myfourth
{
0% { left:0px; top:150px;}
25% { left:0px; top:0px;}
50% { left:150px; top:0px;}
75% { left:150px; top:150px;}
100% { left:0px; top:150px;}
}
@-webkit-keyframes myfourth /* Safari and Chrome */
{
0%
{
left:0px;
top:170px;
}
25%
{
left:0px;
top:0px;
}
50%
{
left:170px;
top:0px;
}
75%
{
left:170px;
top:170px;
}
100%
{
left:0px;
top:170px;
}
}
.div3
{
width:170px;
height:170px;
position:relative;
animation:mysecond 5s infinite;
animation-direction:alternate;
-webkit-animation:mysecond 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:mysecond 5s infinite;
-moz-animation-direction:alternate;
-o-animation:mysecond 5s infinite;
-o-animation-direction:alternate;
-ms-animation:mysecond 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes mysecond
{
0% { left:150px; top:0px;}
25% { left:150px; top:150px;}
50% { left:0px; top:150px;}
75% { left:0px; top:0px;}
100% { left:150px; top:0px;}
}
@-webkit-keyframes mysecond /* Safari and Chrome */
{
0%
{
left:170px;
top:0px;
}
25%
{
left:170px;
top:170px;
}
50%
{
left:0px;
top:170px;
}
75%
{
left:0px;
top:0px;
}
100%
{
left:170px;
top:0px;
}
}
.div4
{
width:170px;
height:170px;
position:relative;
animation:mythird 5s infinite;
animation-direction:alternate;
-webkit-animation:mythird 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:mythird 5s infinite;
-moz-animation-direction:alternate;
-o-animation:mythird 5s infinite;
-o-animation-direction:alternate;
-ms-animation:mythird 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes mythird
{
0% { left:150px; top:150px;}
25% { left:0px; top:150px;}
50% { left:0px; top:0px;}
75% { left:150px; top:0px;}
100% { left:150px; top:150px;}
}
@-webkit-keyframes mythird /* Safari and Chrome */
{
0%
{
left:170px;
top:170px;
}
25%
{
left:0px;
top:170px;
}
50%
{
left:0px;
top:0px;
}
75%
{
left:170px;
top:0px;
}
100%
{
left:170px;
top:170px;
}
}