<div id="three-container">
<div id="star"></div>
<div id="three"></div>
<img class="globe1" src="https://avatars3.githubusercontent.com/u/26817802?s=80"/>
<img class="globe2" src="https://avatars1.githubusercontent.com/u/1307267?s=80"/>
<img class="globe3" src="https://avatars2.githubusercontent.com/u/3276739?s=80"/>
<img class="globe4" src="https://avatars1.githubusercontent.com/u/8249453?s=80"/>
<img class="globe5" src="https://avatars2.githubusercontent.com/u/29441630?s=80"/>
<img class="globe6" src="https://avatars2.githubusercontent.com/u/13032099?s=80"/>
</div>
#three-container{
margin-left:50px;
position:absolute;
background:url('https://images.unsplash.com/photo-1486078695445-0497c2f58cfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80');
width:500px;
height:700px;
border:1px solid black;
}
img{
position:absolute;
display:block;
width:80px;
height:80px;
border-radius:50%;
border:4px solid red;
overflow:hidden;
animation: globes 20s infinite;
}
@keyframes globes {
0% {
transform: translate(30px, 0px);
}
50%{
transform: translate(-30px, -10px);
}
100% {
transform: translate(30px, 0px);
}
}
.globe1{
top:310px;
left:100px;
}
.globe2{
top:310px;
left:310px;
}
.globe3{
top:330px;
left:205px;
}
.globe4{
top:450px;
left:60px;
}
.globe5{
top:480px;
left:205px;
}
.globe6{
top:450px;
left:350px;
}
#star{
position:absolute;
top:40px;
left:200px;
width:100px;
height:100px;
z-index:10;
background-image: linear-gradient(45deg, #f4ff29 25%, #dce800 25%, #dce800 50%, #f4ff29 50%, #f4ff29 75%, #dce800 75%, #dce800 100%);
background-size: 28.28px 28.28px;
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: star 20s infinite;
}
@keyframes star {
0% {
transform: translate(30px, 0px);
background-position: 0px 0px;
}
50%{
transform: translate(-30px, -10px);
}
100% {
transform: translate(30px, 0px);
background-position: 200px 0px;
}
}
#three{
position:absolute;
left:50px;
top:100px;
width:400px;
height:700px;
background-image: linear-gradient(5deg, #1a9900 25%, #00ab17 25%, #00ab17 50%, #1a9900 50%, #1a9900 75%, #00ab17 75%, #00ab17 100%);
background-size: 49.44px 68.05px;
clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%);
-webkit-clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%);
animation: three 20s infinite;
}
@keyframes three {
0% {
background-position: 0px 0px;
clip-path: polygon(58% 1%, 88% 31%, 78% 31%, 98% 51%, 88% 51%, 102% 71%, 60% 71%, 60% 81%, 40% 81%, 40% 71%, 0% 71%, 22% 51%, 12% 51%, 32% 31%, 22% 31%);
-webkit-clip-path: polygon(58% 0%, 88% 30%, 78% 30%, 98% 50%, 88% 50%, 102% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 22% 50%, 12% 50%, 32% 30%, 22% 30%);
}
50%{
clip-path: polygon(42% -1%, 72% 29%, 62% 29%, 82% 49%, 72% 49%, 92% 69%, 60% 69%, 60% 79%, 40% 79%, 40% 69%, 0% 69%, 12% 49%, 2% 49%, 22% 29%, 12% 29%);
-webkit-clip-path: polygon(42% 0%, 72% 30%, 62% 30%, 82% 50%, 72% 50%, 92% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 12% 50%, 2% 50%, 22% 30%, 12% 30%);
}
100% {
clip-path: polygon(58% 1%, 88% 31%, 78% 31%, 98% 51%, 88% 51%, 102% 71%, 60% 71%, 60% 81%, 40% 81%, 40% 71%, 0% 71%, 22% 51%, 12% 51%, 32% 31%, 22% 31%);
-webkit-clip-path: polygon(58% 0%, 88% 30%, 78% 30%, 98% 50%, 88% 50%, 102% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 22% 50%, 12% 50%, 32% 30%, 22% 30%);
background-position: 0px 200px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.