Skip to content
Advertisements

CSS illusion

https://codepen.io/guldus/pen/mgKmwd

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <div id="box">
    <div id="box_in">
        <div class="line a1"><div class="circle a1"></div></div>
        <div class="line a2"><div class="circle a2"></div></div>
        <div class="line a3"><div class="circle a3"></div></div>
        <div class="line a4"><div class="circle a4"></div></div>
        <div class="line a5"><div class="circle a5"></div></div>
        <div class="line a6"><div class="circle a6"></div></div>
        <div class="line a7"><div class="circle a7"></div></div>
        <div class="line a8"><div class="circle a8"></div></div>
        <div class="line a9"><div class="circle a9"></div></div>
        <div class="line a10"><div class="circle a10"></div></div>
        <div class="line a11"><div class="circle a11"></div></div>
        <div class="line a12"><div class="circle a12"></div></div>
        <div class="line a13"><div class="circle a13"></div></div>
        <div class="line a14"><div class="circle a14"></div></div>
        <div class="line a15"><div class="circle a15"></div></div>
        <div class="line a16"><div class="circle a16"></div></div>
        <div class="line a17"><div class="circle a17"></div></div>
        <div class="line a18"><div class="circle a18"></div></div>

    </div>
  </div>


</body>
</html>

CSS

body{ background: #262626}
#box{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.1);
    border-radius: 50%;
}
#box_in{
    position: relative;
}
.line{
    position: absolute;
    top: 250px;
    width: 500px;
    height: 1px;
    background: rgba(204, 204, 0,.1);
}
.circle{
    position: absolute;
    top: -10px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #e65c00;
    animation: ani 3.6s ease-in-out infinite;
    border-radius: 50%;
}
.a1{transform: rotate(0deg)}
.a2{transform: rotate(10deg)}
.a3{transform: rotate(20deg)}
.a4{transform: rotate(30deg)}
.a5{transform: rotate(40deg)}
.a6{transform: rotate(50deg)}
.a7{transform: rotate(60deg)}
.a8{transform: rotate(70deg)}
.a9{transform: rotate(80deg)}
.a10{transform: rotate(90deg)}
.a11{transform: rotate(100deg)}
.a12{transform: rotate(110deg)}
.a13{transform: rotate(120deg)}
.a14{transform: rotate(130deg)}
.a15{transform: rotate(140deg)}
.a16{transform: rotate(150deg)}
.a17{transform: rotate(160deg)}
.a18{transform: rotate(170deg)}

.circle.a1{animation-delay: .0s;}
.circle.a2{animation-delay: .1s;}
.circle.a3{animation-delay: .2s;}
.circle.a4{animation-delay: .3s;}
.circle.a5{animation-delay: .4s;}
.circle.a6{animation-delay: .5s;}
.circle.a7{animation-delay: .6s;}
.circle.a8{animation-delay: .7s;}
.circle.a9{animation-delay: .8s;}
.circle.a10{animation-delay: .9s;}
.circle.a11{animation-delay: 1s;}
.circle.a12{animation-delay: 1.1s;}
.circle.a13{animation-delay: 1.2s;}
.circle.a14{animation-delay: 1.3s;}
.circle.a15{animation-delay: 1.4s;}
.circle.a16{animation-delay: 1.5s;}
.circle.a17{animation-delay: 1.6s;}
.circle.a18{animation-delay: 1.7s;}

@keyframes ani{
    0%{
        left: 0px;
    }
    50%{
        left: 480px;
    }
    100%{
        left: 0px;
    }
}
Advertisements

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: