Как сделать анимацию с атомом, используя анимацию CSS3?

Я пытаюсь это сделать с 3-4 дней, но не могу получить, как я могу сделать эту анимацию, даже не уверен, можно ли сделать такую, используя это только CSS3?

Я попытался использовать animation-direction:alternate;, но я не могу получить этот поток под определенным углом, способный анимировать его в квадратной форме.., но не так, как атом оживляет, любая идея, как это можно сделать с помощью чистого CSS3? если нет решения в jQuery?

Ответ 1

Найден этот в Интернете.

Он использует свойство transform-style: preserve-3d и поворачивает электроны на оси x, y и z для достижения этого трехмерного эффекта.

Структура HTML

<div id="main">
    <div id="atom">
        <div class="orbit">
            <div class="path">
                <div class="electron"></div>
            </div>
        </div>
        <div class="orbit">
            <div class="path">
                <div class="electron"></div>
            </div>
        </div>
        <div class="orbit">
            <div class="path">
                <div class="electron"></div>
            </div>
        </div>
        <div class="orbit">
            <div class="path">
                <div class="electron"></div>
            </div>
        </div>
        <div id="nucleus"></div>
    </div>
</div>

CSS

.orbit { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotateX(80deg) rotateY(20deg);
}

#atom .orbit:nth-child(2) { 
   -webkit-transform: rotateX(80deg) rotateY(70deg)
}
#atom .orbit:nth-child(3) { 
   -webkit-transform: rotateX(80deg) rotateY(-20deg)
}
#atom .orbit:nth-child(4) { 
   -webkit-transform: rotateX(80deg) rotateY(-50deg)
}

.path { 
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: pathRotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear; 
}

.electron { 
    -webkit-animation-name: electronFix; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;  
}

@-webkit-keyframes pathRotate { 
    from { 
       -webkit-transform: rotateZ(0deg);
    } to { 
       -webkit-transform: rotateZ(360deg); 
    } 
}

@-webkit-keyframes electronFix { 
    from { 
       -webkit-transform: rotateX(90deg) rotateY(0deg); 
    } to { 
       -webkit-transform: rotateX(90deg) rotateY(-360deg); 
    } 
}

Fiddle

Сообщение в блоге

Ответ 2

Определенно возможно с CSS. Я поставил перед собой основную задачу как доказательство концепции, прежде чем замечать сообщение @prashanth. Тот, который он нашел, - это waaay cooler, но здесь все равно... супер голые кости, но немного возиться, и это выглядело бы неплохо.

http://jsfiddle.net/BZFJ8/2/

Ответ 3

Я думаю, что этот тоже выглядит так, как вы просили, но они сказали, что для анимации Safari только для Chrome 9

http://bgre.at/demo/CSS3-atom/index.html

Вы можете найти решение с JQuery, если вы заботитесь о совместимости с браузером.