Html CSS3滑鼠上的滑动div_Html_Css

Html CSS3滑鼠上的滑动div

html css

Html CSS3滑鼠上的滑动div,html,css,Html,Css,我想让一个div滑到另一个向后的div上，但不知道如何使用任何提示？我可以制作动画，但当我将鼠标移到动画上时，动画无法正常工作，有人能解释一下原因吗 <!DOCTYPE html> <html> <head> <style> .fundo_main { width:200px; height:200px; background-color:red; position:relative; } .fundo_main:

我想让一个div滑到另一个向后的div上，但不知道如何使用任何提示？我可以制作动画，但当我将鼠标移到动画上时，动画无法正常工作，有人能解释一下原因吗

<!DOCTYPE html>
<html>
<head>
<style>
.fundo_main {
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
}
.fundo_main:hover {
    width:200px;
    height:200px;
    -webkit-animation-name:myfirst;
    position:relative;
}
.fundo {
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
    -webkit-animation-name:myfirst;
}

.fundo:hover {
    width:200px;
    height:200px;
    background-color:blue;
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:.3s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-direction:left;

}
@-webkit-keyframes myfirst {
    0% { width:0px; }
    65% { width: 150px;}    
    100% { width:200px; }
}
</style>
</head>
<body>
<div class="fundo_main">
    <div class="fundo"></div>
</div>
</body>
</html>


.fundo_main{
宽度：200px；
高度：200px；
背景色：红色；
位置：相对位置；
}
.fundo_main：悬停{
宽度：200px；
高度：200px；
-webkit动画名称：myfirst；
位置：相对位置；
}
芬多先生{
宽度：200px；
高度：200px；
背景色：红色；
位置：相对位置；
-webkit动画名称：myfirst；
}
.fundo:悬停{
宽度：200px；
高度：200px；
背景颜色：蓝色；
-webkit动画名称：myfirst；
-webkit动画持续时间：.3s；
-webkit动画计时功能：线性；
-webkit动画方向：左；
}
@-webkit为myfirst设置关键帧{
0%{宽度：0px；}
65%{宽度：150px；}
100%{宽度：200px；}
}

我要说的是改变这一点：

.fundo:hover

对于这一点：

.fundo_main:hover .fundo

你能创建一个JSFIDLE来解释你想做什么吗？它工作得很好。有什么问题吗？很好用。你到底想实现什么？不是，当你鼠标移到上面时，有时会有点问题，我做错了什么？很棒的工作就像一个符咒，我对这些css3“新”东西有点陌生（事实上很多）类似的鼠标移出效果有什么提示吗？不要把动画放在

：悬停状态，如果你也想有鼠标移出效果。请参见（关于变换，但同样适用于动画）