Hue Rotate Experiment

HTML
<div class='starburst'></div> <div class='bigCube'></div> <div class='littleCube'></div>
CSS
html, body { height: 100vh; overflow: hidden; margin: 0; padding: 0; background: tomato; } .starburst { min-width: 100vw; min-height: 100vh; margin-top: -5vh; overflow: visible; display: block; position: absolute; background: url(http://i.imgur.com/Hr5GNHH.png) no-repeat; background-size: 20%; background-position: center; transform-origin: center; animation: turn 40s linear infinite; } .bigCube { width: 100vw; height: 90vh; display: block; position: absolute; vertical-align: middle; padding: 0; margin: 0 auto; background: url(http://i.imgur.com/qKEKI8d.png) no-repeat; background-position: center; transition: 1s; background-size: auto 40%; animation: unblur 1s linear 1; } .littleCube { width: 100vw; height: 90vh; display: block; position: absolute; vertical-align: middle; padding: 0; background: url(http://i.imgur.com/wdb2aU7.png) no-repeat; background-position: center; background-size: auto 21%; transition: 2s; animation: unblur 2s linear 1; animation: hueturn 4s infinite; } @keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes hueturn { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(359deg); } } @keyframes unblur { from { filter: blur(10px); } to { filter: blur(0); } }
JAVASCRIPT
Expand for more options Login