合作开发日志1

明日月初

已于 2024-03-20 20:09:35 修改

阅读量171

点赞数 2

文章标签： javascript css 前端

于 2024-03-17 20:51:27 首次发布

本文链接：https://blog.csdn.net/qweasl_/article/details/136789629

版权

小球围着大球转

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

效果：