Javascript 我如何制作这个动画？
所以我有了这个想法。基本上，我想要一个在中心的圆div。我想要一束从div上下来的小线条，有点像太阳发出的光线，这应该是它所代表的。我该怎么做？我会使用JavaScript还是CSS3动画 我可能现在就可以这样做，但几分钟后就会变得非常滞后，因为这些行在离开页面后不会自动删除。我真的不知道怎么做。而且，它看起来不太好，因为我感觉我的方法会很原始 最棘手的一点是，大多数线条都会以某种形式的角度移动，因为光线在太阳的360度方向上都会散开，这意味着我必须同时设置边距顶部和边距左侧或右侧，以某种方式使它们沿着我想要的方向移动。。。这可能是一个相当复杂的动画，不是吗Javascript 我如何制作这个动画？,javascript,html,css,animation,Javascript,Html,Css,Animation,所以我有了这个想法。基本上，我想要一个在中心的圆div。我想要一束从div上下来的小线条，有点像太阳发出的光线，这应该是它所代表的。我该怎么做？我会使用JavaScript还是CSS3动画 我可能现在就可以这样做，但几分钟后就会变得非常滞后，因为这些行在离开页面后不会自动删除。我真的不知道怎么做。而且，它看起来不太好，因为我感觉我的方法会很原始 最棘手的一点是，大多数线条都会以某种形式的角度移动，因为光线在太阳的360度方向上都会散开，这意味着我必须同时设置边距顶部和边距左侧或右侧，以某种方式使
有谁知道一些教程能帮我解决这个问题？我希望这是有意义的…下面是带有嵌入式样式和JQuery的基本HTML文档的代码。确保最大化浏览器窗口以查看动画
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#sun
{
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
width: 400px;
height: 400px;
background: yellow;
border-radius: 200px;
background-image: -moz-radial-gradient(45px 45px 60deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 60deg, circle cover, yellow 0%, orange 100%, red 95%);
}
.ray
{
border-radius: 50%;
width: 30px;
height: 30px;
background-color: orange;
display: block;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin: -15px;
}
#one { transform: rotate(-45deg) translate(215px); }
#two { transform: rotate(-90deg) translate(215px); }
#three { transform: rotate(-135deg) translate(215px); }
#four { transform: rotate(-180deg) translate(215px); }
#five { transform: rotate(-225deg) translate(215px); }
#six { transform: rotate(-270deg) translate(215px); }
#seven { transform: rotate(-315deg) translate(215px); }
#eight { transform: rotate(-360deg) translate(215px); }
</style>
</head>
<body>
<div id="sun"></div>
<div id="one" class="ray"></div>
<div id="two" class="ray"></div>
<div id="three" class="ray"></div>
<div id="four" class="ray"></div>
<div id="five" class="ray"></div>
<div id="six" class="ray"></div>
<div id="seven" class="ray"></div>
<div id="eight" class="ray"></div>
</div>
<script type="text/javascript">
function movement() {
$("#two").animate({top: '-=50'}, 300);
$("#three").animate({top: '-=35.35', left: '-=35.35'}, 300);
$("#four").animate({left: '-=50'}, 300);
$("#five").animate({top: '+=35.35', left: '-=35.35'}, 300);
$("#six").animate({top: '+=50'}, 300);
$("#seven").animate({top: '+=35.35', left: '+=35.35'}, 300);
$("#eight").animate({left: '+=50'}, 300);
$("#one").animate({top: '-=35.35', left: '+=35.35'}, 300);
//Reverse Animation
$("#two").animate({top: '+=50'}, 450);
$("#three").animate({top: '+=35.35', left: '+=35.35'}, 450);
$("#four").animate({left: '+=50'}, 450);
$("#five").animate({top: '-=35.35', left: '+=35.35'}, 450);
$("#six").animate({top: '-=50'}, 450);
$("#seven").animate({top: '-=35.35', left: '-=35.35'}, 450);
$("#eight").animate({left: '-=50'}, 450);
$("#one").animate({top: '+=35.35', left: '-=35.35'}, 450);
setTimeout(movement, 750);
}
$(document).ready(function() {
movement();
});
</script>
</body>
</html>
这是一个很好的SVG动画指南：哇。。。做得很好。谢谢你回答了这个问题，不过我也要感谢约瑟夫。这种联系也很有帮助。这并不复杂，我可能自己也能做到。但是你忘了我想让潜水器在360度的方向上远离太阳。不是在海峡线上，而是像你所期望的那样，从一个圆形的太阳射出光线。我该怎么做？Tommay-你能再具体一点吗？你说的360度远离太阳是什么意思？你的意思是你想让div在圆周上移动-比如在360度的太阳上移动？我很乐意帮忙。谢谢，呃。。。像这样：看看光线是如何以应该的角度移动的？他们不是只去北、南、东、西，而是去东北、东南等等。