我正在寻找一种悬停效果来暂停动画.....
我创建了一个大小为 400x400 的 div 并在该 div 中添加了四个大小为 150x150 的图像，并为每个图像分配了一个大小为 150x150 的单个 div .....
这样就可以在一个 div 中创建四个不同的 div 元素......！
现在我已经使用 css3 动画和 -webkit 框架使四个图像旋转，如上图。现在我想在悬停时暂停此动画，以便在悬停时为每个图像提供气泡消息...
如果我分别对 div1、div2、div3、div4 进行悬停暂停，并且当我悬停时，只有特定图像会暂停，而其他三个图像会继续旋转，看动画看起来很尴尬。
如果我使用暂停悬停到外部 div 内部 div 不会受到影响，动画仍然继续......
当我将鼠标悬停在单个图像上并在取消悬停后继续旋转时，我只需要停止所有四个图像的动画......
我是 CSS 新手，所以尊重你所有的帮助和答案......
这是我使用的代码....
`/* css*/ .div1 { width:170px; 高度：170px；位置：相对；动画：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;
}
}