寻原因是什么
慕粉4042427
2016-10-29 15:21
1、鼠标放置某一地方有效，其他地方无效，放置地在那决定
2、当width: 300px;改为width: 100px无放置地
<div>鼠标放到我身上</div>
@Keyframes changecolor{
0%{margin-left: 100px;
background: green;
}
40%{margin-left:150px;
background:orange;
}
60%{ margin-left: 75px;
background:blue;
}
100%{margin-left: 100px;
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
3回答
-
- 慕妹7508549
- 2016-10-29 20:27:43
有效的，是不是哪写错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@Keyframes changecolor{
0%{margin-left: 100px;
background: green;
}
40%{margin-left:150px;
background:orange;
}
60%{ margin-left: 75px;
background:blue;
}
100%{margin-left: 100px;
background: red;
}
}
div {
width: 100px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>鼠标放到我身上</div>
</body>
</html>
-
- 慕工程2957023
- 2016-11-21 13:17:29
你用的什么浏览器？加前缀
-
- 慕粉4042427
- 2016-10-29 21:50:16
先给予采纳，复制你的还是无效，但发现1个有趣事，当width: 300px;时鼠标放置在边框至"放"字位置有效，当width:缩小时，有效位置从左边框起右边逐渐缩小，width: 270px时，有效位置就是左边框，低于270无效
十天精通CSS3
243142 学习 · 2677 问题
相似问题