Как мне сделать эту анимацию?

-4

Итак, у меня есть эта идея. В принципе, мне нужен круг div в центре. И я хочу, чтобы из дива была куча маленьких линий, похожих на лучи света, сходящие с Солнца (это должно быть то, что он представляет). Как мне это сделать? Использую ли я JavaScript или CSS3-анимацию?Как мне сделать эту анимацию?

Возможно, я мог бы сделать это прямо сейчас, но через пару минут он станет невероятно лагированным, потому что линии не удалятся после того, как они покинут страницу. Я не знаю, как это сделать. Кроме того, это просто выглядит не очень хорошо, потому что у меня есть чувство, что мои методы будут довольно примитивными.

Сложный бит в том, что большинство линий будут путешествовать под углом в какой-либо форме (потому что лучи света оторвались на всех 360 градусах Солнца), то есть мне нужно было бы установить верхний край и левая или правая маржа в то же время в некотором роде, что заставляет их идти в прямом направлении, в котором я хочу ... Это, вероятно, довольно сложная анимация, не так ли? ...

Кто-нибудь знает о некоторых уроках, чтобы указать мне на это, поможет ли это? Я надеюсь, что это имело смысл ...

источник

2014-12-24 Tommay

Это хороший гид для SVG анимации: http://css-tricks.com/guide-svg-animations-smil/ –

Ниже приведен код основного документа HTML с номером embedded styling and JQuery. Убедитесь, что вы увеличили окно своего браузера, чтобы увидеть анимацию.

<!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>

источник

2014-12-25 03:42:07

Wow ... Очень хорошо сделано. Спасибо, что ответили на этот вопрос (хотя я также должен отдать должное Джозефу. Эта ссылка также была полезна). Это не очень сложно, и я, вероятно, мог бы сделать это сам. Но вы забыли, что я хочу, чтобы divs отошли от солнца на всех 360 направлениях. Не в линиях пролива, но, как вы ожидаете, лучи будут двигаться от кругового Солнца. Как мне это сделать? – Tommay

Tommay - Можете ли вы быть более конкретным, пожалуйста? Как вы относитесь к отходу от солнца на всех 360 направлениях (в градусах *)? Вы имеете в виду, что вы хотите, чтобы divs перемещались по кругу - например, путешествуя по 360 градусам солнца? Я хотел бы помочь. Благодарю. –

Erm ... Вот так: http://ak2.picdn.net/shutterstock/videos/20958/preview/stock-footage-lens-flare-animated-rotating-glow-light-rings-and-rays-red- to-orange-quicktime-seamless-loop.jpg Посмотрите, как лучи отходят под углом, которым они должны быть? Вместо того, чтобы идти только на север, юг, восток и запад, они идут на северо-восток, юго-восток и т. Д. – Tommay

Как мне сделать эту анимацию?

ответ

Смежные вопросы