小球围着大球转
<script setup lang="ts">
</script>
<template>
<div class="ball-container">
<div class="back">
<div class="b">
<div class="run"></div>
</div>
<div class="a">
<div class="blueCircle"></div>
<div class="circle"></div>
<div class="bluevioletcircle"></div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.back{
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
.b{
margin-top: 15%;
margin-left:54%;
}
.a{
margin-left: 40%;
display: flex;
}
.circle{
width: 20rem;
height: 20rem;
background-color: aquamarine;
border-radius: 50%;
animation: circle 3s linear infinite;
@keyframes circle {
0% , 100%{
transform:translateY(0);
box-shadow: 0 -5px 16px aquamarine;
}
50%{
transform: translateY(-25%);
box-shadow: 0 5px 16px aquamarine;
}
}
}
.blueCircle{
width: 5rem;
height: 5rem;
background-color: skyblue;
border-radius: 50%;
transform: translate(-5rem,15rem);
animation: move 3s linear infinite;
@keyframes move {
0%{
transform: translate(12rem,5rem) rotate(0deg) translateX(18rem) rotate(0deg);
}
100%{
transform: translate(12rem,5rem) rotate(360deg) translateX(18rem) rotate(-360deg);
}
}
}
.bluevioletcircle{
width: 5rem;
height: 5rem;
background-color: blueviolet;
border-radius: 50%;
transform: translate(5rem,15rem);
animation: moll 3s linear infinite;
@keyframes moll{
0%{
transform: translate(-12rem,5rem) rotate(0deg) translateX(-18rem) rotate(0deg);
}
100%{
transform: translate(-12rem,5rem) rotate(360deg) translateX(-18rem) rotate(-360deg);
}
}
}
.run{
width: 5rem;
height: 5rem;
background-color: #feb14f;
border-radius: 50%;
transform: translateY(-5rem);
animation: mol 3s linear infinite;
@keyframes mol {
0%{
transform: translateY(10rem) rotate(0deg) translateY(18rem) rotate(0deg);
}
100%{
transform: translateY(10rem) rotate(360deg) translateY(18rem) rotate(-360deg);
}
}
}
}
</style>
效果: