Die vier kleinen Kugeln sind jeweils in vier quadratischen Abschnitten enthalten, die kleinen Kugeln ebenfalls relativ zur quadratischen Positionierung (oben: 0; links: 0), drehen Sie das quadratische Div so, dass sich die Kugeln an den vier Ecken befinden, und verwenden Sie dann die Keyframe-Animation, um die Kugel so zu steuern, dass sie sich zwischen der aktuellen Position und einer Position hin und her bewegt nahe dem Mittelpunkt
{animation: flor_move 1s 0s ease infinite;} @keyframes flor_move { 50%{ top: 25px; left: 25px; } }
Es bleibt noch ein Rotationseffekt übrig, der dem übergeordneten Element des quadratischen Div
{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote { 25%{ transform: rotateZ(90deg); } 50%{transform: rotateZ(180deg); } 75%{transform: rotateZ(270deg); } 100%{transform: rotateZ(360deg); }}
@keyframes mar_ligt { 50%{ opacity: 0.4; }}
Es gibt noch neun kleine Kugeln, allerdings wurde hier die Größe der kleinen Kugeln geändert, um zu verhindern, dass das Layout durch die Größenänderung durcheinander gerät , jede kleine Kugel ist in einem Div mit fester Breite und Höhe enthalten, sodass die kleinen Kugeln im Div immer horizontal ausgerichtet werden können. Auf diese Weise können Sie die Größe des Balls sicher ändern (jeder Ball ist weiterhin auf eine andere Animationszeit eingestellt)
@keyframes mar_ligts { 50%{ transform: scale(.5);opacity: 0.4; }}
{animation: poolball_l 1s .5s linear infinite;} //左边的小球 {animation: poolball_r 1s 0s linear infinite;} //右边的小球@keyframes poolball_l { 25%{ transform: translateX(-100%); } 50%{transform: translateX(0); }} @keyframes poolball_r { 25%{ transform: translateX(100%); } 50%{transform: translateX(0); }}
{animation: size_change 1.2s linear infinite;}@keyframes size_change { 20%{ width: 0;height: 0; } 40%{width: 0;height: 0; } 50%{width: 20px;height: 20px; }}
{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP { 50%{ transform: translateY(60px); }} @keyframes flip_ballS { 50%{ height: 15px;width: 15px;opacity: 0.6; } 75%{height: 20px;width: 20px;opacity: 1; }}
Das obige ist der detaillierte Inhalt vonAnimationssammlung wird geladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!