running result
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
margin: 10px auto;
overflow: hidden;
position: relative;
border-radius: 100%;
animation: shadow 10s infinite linear;
}
div:hover{
animation-play-state:paused;
}
img{
-webkit-user-drag: none;
}
.earth1{
width: 1024px;
height: 512px;
position: absolute;
left: 0;
top: 0;
animation: earth1 10s infinite linear;
}
.earth2{
width: 1024px;
height: 512px;
position: absolute;
left: 200%;
top: 0;
animation: earth2 10s infinite linear ;
}
@keyframes earth1 {
0%{left: 0}
100%{left: -200%}
}
@keyframes earth2 {
0%{left: 200%}
100%{left: 0}
}
@keyframes shadow {
from{ box-shadow: 10px 10px 5px #888888;}
to{ box-shadow: -10px 10px 5px #888888;}
}
</style>
</head>
<body>
<div>
<img class="earth1" src="earth.jpg" alt="">
<img class="earth2" src="earth.jpg" alt="">
</div>
</body>
</html>
Raw materials
