尋原因是什么
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;
}
2016-10-29
有效的，是不是哪寫錯了
<!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>
2016-11-21
你用的什么瀏覽器？加前綴
2016-10-29
先給予采納，復制你的還是無效，但發現1個有趣事，當width: 300px;時鼠標放置在邊框至"放"字位置有效，當width:縮小時，有效位置從左邊框起右邊逐漸縮小，width: 270px時，有效位置就是左邊框，低于270無效