<!-- For only the image effect, only .outerGif and .innerGif are necessary -->
<!-- Sadly for javascript purposes we need a div within innerGif (CSS animation version doesn't need this, it can use a pseudo-element instead) -->
<body>
<!-- CSS animation -->
<div class='outerGif cssAnim'>
  <div class='innerGif'><div class='image'></div></div>
  <div class='overlay'><div class='image'></div></div>
</div>

<!-- With JS interaction. This is interesting when made full page -->
<div class='outerGif jsFollow'>
  <div class='innerGif'><div class='image'></div></div>
  <div class='overlay'><div class='image'></div></div>
</div>
</body>




<head>
<script type="text/javascript"> 
window.onload=function(){
var outerGifs = document.querySelectorAll('.jsFollow'),
    innerGifs = document.querySelectorAll('.jsFollow > .innerGif'),
    innerGifImages = document.querySelectorAll('.jsFollow > .innerGif > .image');
window.onmousemove = rotateElems;
function rotateElems(e) {
  var mouseX = e.pageX,
      mouseY = e.pageY;
  for(var i=0; i < innerGifs.length; i++) {
    var outerGif = outerGifs[i],
        innerGif = innerGifs[i],
        innerGifImage = innerGifImages[i],
        centerX = outerGif.offsetLeft + (outerGif.clientWidth / 2),
        centerY = outerGif.offsetTop + (outerGif.clientHeight / 2),
        degree = Math.atan2(mouseX - centerX, - (mouseY - centerY) )*(180/Math.PI);    
    innerGif.style.webkitTransform = "rotate(" + degree + "deg)";
    innerGif.style.transform = "rotate(" + degree + "deg)";
    degree = -degree;
    innerGifImage.style.webkitTransform = "rotate(" + degree + "deg)";
    innerGifImage.style.transform = "rotate(" + degree + "deg)";
  }
}
}
</script></head>
html, body { height:100%; margin:0; padding:0; background:#F4F4F4; }
.outerGif {
  margin-top:50px;
  display:inline-block;
  position:relative;
  background: url(https://25.media.tumblr.com/tumblr_md91o3v2o21rdi9rjo1_500.gif);
  border-radius:50%;
  background-size:cover;
  width:300px; height:300px;
  overflow:hidden;
  /* Fix webkit rendering bug */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.innerGif {
  position:absolute;
  left:-25%; bottom:50%;
  width:150%; height:50%;
  transform-origin:bottom center;
  overflow:hidden;
}
.innerGif .image {
  top:0%;
  height:200%; width:100%;
  background: url(https://25.media.tumblr.com/tumblr_mayd2coRwu1rhy8q9o1_500.gif) center center;
  background-size:cover;  
}
.overlay {
  position:absolute;
  top:50%; left:50%;
  margin-top:-75px; margin-left:-75px;
  width:150px; height:150px;
  background:#F4F4F4;
  border-radius:50%;
}
.overlay:before {
  content:''; position:absolute;
  width:170%; height:170%;
  border-radius:50%;
  margin-top:-68px; margin-left:-68px;
  border:15px solid #F4F4F4;
}
.overlay .image {
  position:absolute;
  top:60%; left:50%;
  width:70px; height:70px;
  overflow:hidden;
  background:url(https://25.media.tumblr.com/tumblr_ma235cIYyx1rzygcio1_500.gif) center 42%;
  margin-top:-35px; margin-left:-35px;
}
.overlay .image:before {
  content:''; position:absolute;
  left:-80%;
  height:120%; width:80%;
  background:#F4F4F4;
  transform-origin:top right;
  transform:rotate(-33deg);
}
.overlay .image:after {
  content:''; position:absolute;
  right:-80%;
  height:120%; width:80%;
  background:#F4F4F4;
  transform-origin:top left;
  transform:rotate(33deg);
}

.cssAnim { left:15%; }
.jsFollow { left:25%; }
.cssAnim .innerGif { animation:elem 5s infinite; }
.cssAnim .innerGif .image { animation:inner 5s infinite; }

@keyframes elem {
  30% { transform:rotate(-50deg); }
  70% { transform:rotate(180deg); }
}
@keyframes inner {
  30% { transform:rotate(50deg); }
  70% { transform:rotate(-180deg); }
}
// NOTE: Javascript is in the head (found in the HTML section here)
// For more check out zachsaucier.com

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.