<div class="container">
        <span></span>
        <div class="center">
            <div class="wrap">
                <div class="box-1 box">
                    <i class="fas fa-file-code"></i>
                    <i class="fas fa-file-code"></i>
                </div>
                <div class="box-2 box">
                    <i class="fas fa-file-code"></i>
                    <i class="fas fa-file-code"></i>
                </div>
            </div>
        </div>
    </div>


<a href="https://dribbble.com/YancyMin" class="dr-url" target="_blank"><img class="dr" src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: rgb(255, 255, 255);
}

i {
    font-size: 55px;
    margin: 16px;
    color: #F9C42F;
}

.container {
    position: relative;
    height: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 140px;
    height: 140px;
    border-radius: 100%;
    background-color: #fff;
    border: 9px solid #DEE1E4;
    overflow: hidden;
}

.container::before {
    content: "";
    position: absolute;
    top: 210px;
    left: 26px;
    width: 100px;
    height: 32px;
    border-radius: 100%;
    background-color: rgba(222, 225, 228, 0.4);
}

.wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

span::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 6px;
    background-color: #DEE1E4;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

span::after {
    content: "";
    position: absolute;
    left: 30px;
    top: 20px;
    width: 36px;
    height: 12px;
    background-color: #DEE1E4;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    border-radius: 0 4px 4px 0;
}

.box-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.box-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

/* animation */

@-webkit-keyframes rowup-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0, 0);
    }
}

@keyframes rowup-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0, 0);
    }
}

@-webkit-keyframes rowup-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0, 0);
    }
}

@keyframes rowup-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0, 0);
    }
}

@-webkit-keyframes cloud-loop {
    0% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes shadow-loop {
    0% {
        -webkit-transform: translate(0, -35px) scale(1.15, 0.25);
        transform: translate(0, -35px) scale(1.15, 0.25);
    }
    100% {
        -webkit-transform: translate(0, -35px) scale(1, 0.25);
        transform: translate(0, -35px) scale(1, 0.25);
    }
}

@keyframes shadow-loop {
    0% {
        -webkit-transform: translate(0, -35px) scale(1.15, 0.25);
        transform: translate(0, -35px) scale(1.15, 0.25);
    }
    100% {
        -webkit-transform: translate(0, -35px) scale(1, 0.25);
        transform: translate(0, -35px) scale(1, 0.25);
    }
}

.box-1 {
    -webkit-animation: 1s rowup-1 linear infinite normal;
            animation: 1s rowup-1 linear infinite normal;
}

.box-2 {
    -webkit-animation: 1s rowup-2 linear infinite normal;
            animation: 1s rowup-2 linear infinite normal;
}

.center {
    -webkit-animation-name: cloud-loop;
    animation-name: cloud-loop;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

span {
    position: relative;
    left: 112px;
    top: 60px;
    -webkit-animation-name: cloud-loop;
    animation-name: cloud-loop;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.container::before {
    -webkit-animation-name: shadow-loop;
    animation-name: shadow-loop;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.dr {
position: absolute;
  bottom: 16px; 
  right: 16px;
  width:100px;
}

External CSS

  1. https://use.fontawesome.com/releases/v5.2.0/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.