js+css如何实现动画效果？
如图所示，实现可以从点6游向其他五个点的效果，要求能看到游动的效果毫无头绪html5的工作，希望能帮解答，谢谢各位大神...
如图所示，实现可以从点6游向其他五个点的效果，要求能看到游动的效果毫无头绪html5的工作，希望能帮解答，谢谢各位大神
展开
1个回答
展开全部
简单的不用js就行
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf8">
<title>untitled</title>
<link rel = "stylesheet" type = "text/css" href = "">
<style type = "text/css">
*{
margin: 0px;
padding: 0px;
}
#a{
position: absolute;
width: 50px;
height: 50px;
background-color: #f3e9e0;
border-radius: 50%;
left: 400px;
top: 200px;
}
#a div{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
transition: all 0.5s;
left: 0px;
top: 0px;
}
#a :nth-child(1){
background-color: #c1d4ed;
}
#a :nth-child(2){
background-color: #7d6e69;
}
#a :nth-child(3){
background-color: #dad6d5;
}
#a :nth-child(4){
background-color: #caaa9d;
}
#a :nth-child(5){
background-color: #6bdeff;
}
#a:hover :nth-child(1){
left: 150px;
top: -150px;
}
#a:hover :nth-child(2){
left: 150px;
top: 150px;
}
#a:hover :nth-child(3){
left: 300px;
top: -150px;
}
#a:hover :nth-child(4){
left: 300px;
top: 150px;
}
#a:hover :nth-child(5){
left: 450px;
top: 0px;
}
</style>
</head>
<body>
<div id = 'a'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
鼠标伸到球上 自动扩散移动
追问
可是要求的是有触发事件，好比是玩游戏有输赢，但点6赢了的话才会触发点6游向其他点，不然不动
追答
你把它的transition设置好 应该触发的时候 用js设置那几个点的位置 自动会动画过渡到那个效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
