Skip to content

Instantly share code, notes, and snippets.

@VasVV

VasVV/Learning Coding.html

Last active July 21, 2020 14:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VasVV/54db096d36491413dae07b99e01c459a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VasVV/54db096d36491413dae07b99e01c459a to your computer and use it in GitHub Desktop.
Download ZIP
Learning Coding - Pure CSS
Raw
Learning Coding.html
<div class="container">
<div id='up'></div>
<div id="central"></div>
<div id="bottom"></div>
</div>
Raw
style.css
body {
background-image: url('https://i1.yuki.la/4/2c/33481015d04b3974f9ed7acf616592901b13507ebdabf48ee1d6d09d63acc2c4.png');
background-repeat: no-repeat;
}
#central{
background-image: url('https://i.imgur.com/KVzAVKV.png');
width:200px;
height:200px;
background-repeat: no-repeat;
position: absolute;
right: 300px;
top: 150px;
bottom: 300px;
left: 300px;
}
#up{
background-image: url('https://i.imgur.com/KVzAVKV.png');
width:200px;
height:200px;
background-repeat: no-repeat;
position: absolute;
left: 300px;
top: 150px;
animation: myOrbit 4s linear infinite;
}
#bottom{
background-image: url('https://i.imgur.com/KVzAVKV.png');
width:200px;
height:200px;
background-repeat: no-repeat;
position: absolute;
left: 300px;
top: 150px;
animation: myOrbitone 4s linear infinite;
animation-delay: 2s;
}
@keyframes myOrbit {
from { transform: rotate(0deg) translateX(250px) rotate(0deg); }
to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
}
@keyframes myOrbitone {
from { transform: rotate(0deg) translateX(250px) rotate(0deg); }
to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment