css | 用css仿写react运行首页

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

• 实现图

页面最基本的就是结构，第一步先写html结构

<header class="main">
    <div class="main__top">
        <div class="ellipse1 ellipse"></div>
        <div class="ellipse2 ellipse"></div>
        <div class="ellipse3 ellipse"></div>
        <div class="ball"></div>
    </div>
    <p>Edit src/App.js and save to reload.</p>
    <a class="main__link" href="https://reactjs.org/">Learn React</a>
</header>

整个页面比较简单，就是react的logo需要实现。先在ellipse类中先画三个椭圆

.main__top {
    height: 130px;
    left: -7%;			
}
.ellipse {
    width: 170px;
    border: 10px solid rgb(97, 218, 251);
    height: 45px;
    border-radius: 80%;
}

加上定位，让三个椭圆合并成一个椭圆

.main__top {
    position: relative;
    height: 130px;
    left: -7%;			
}
.ellipse {
    width: 170px;
    border: 10px solid rgb(97, 218, 251);
    height: 45px;
    border-radius: 80%;
    position: absolute;
    left: 0;
}

接下来给三个椭圆旋转到不同的角度，虽然没有太还原官方

.ellipse1 {
    transform: rotate(58deg);
}

.ellipse2 {
    transform: rotate(120deg);
}

.ellipse3 {
    transform: rotate(0deg);
}

当当当，还差中间的一个小球页面就绘制成功，用定位固定到三个椭圆的交集处

.ball {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #61dafb;
    position: fixed;
    right: 49.5%;
    top: 37.2%;

}

剩下的任务就是让椭圆动起来，css中有个动画的属性正好可以拿来用

让每个椭圆旋转360°，我之前以为最多旋转到360°，没想到可以更多。

.ellipse1 {
    transform: rotate(58deg);
    animation: trans 20s linear infinite;
}
@keyframes trans {
    from {transform: rotate(58deg);}
    to { transform: rotate(418deg);}
}
.ellipse2 {
    transform: rotate(120deg);
    animation: trans1 20s linear infinite;
}
@keyframes trans1 {
    from {transform: rotate(120deg); }
    to {  transform: rotate(480deg); }
}

.ellipse3 {
    transform: rotate(0deg);
    animation: trans2 20s linear infinite;
    }
@keyframes trans2 {
    from { transform: rotate(0deg);}
    to { transform: rotate(360deg);} 
}

最后整个页面我觉得比较乱，之前很多地方不实现的时候，硬写上去，等缩小页面发现脱离。