| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| @-webkit-keyframes color-animation { |
| 0% { background:#000; } |
| 100% { background:#fff; } |
| } |
| |
| @-webkit-keyframes transform-animation { |
| 0% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); } |
| 50% { -webkit-transform: scale(10) rotate3d(1, 1, 1, 45deg); opacity(0); } |
| 100% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); } |
| } |
| |
| div { |
| position: absolute; |
| -webkit-transform-style: preserve-3d; |
| } |
| |
| .gradient { |
| background:-webkit-repeating-radial-gradient(circle, red, green 5%, blue 10%, red 15%); |
| opacity: 0.25; |
| width:100%; |
| height:900px; |
| } |
| |
| .poster { |
| height: 50px; |
| width: 50px; |
| background-color: gray; |
| -webkit-border-radius: 10px; |
| font-family: 'Georgia', serif; |
| border: 2px solid black; |
| font-size: 42px; |
| font-weight: bold; |
| text-align: center; |
| } |
| </style> |
| <script type="text/javascript"> |
| function startExperiment() |
| { |
| document.body.style.margin = "0"; |
| document.body.style.webkitAnimationName = "color-animation"; |
| document.body.style.webkitAnimationDuration = "0.5s"; |
| document.body.style.webkitAnimationIterationCount = "infinite"; |
| document.body.style.webkitAnimationDirection = "alternate"; |
| for (var i = 0; i < 2; ++i) { |
| var elem = document.getElementById("elem" + i.toString()); |
| elem.style.opacity = "0.5"; |
| elem.style.width = "100%"; |
| elem.style.height = "900px"; |
| elem.style.webkitTransform = "rotate3d(1,1,0," + ((i + 1) * 10).toString() + "deg)"; |
| elem.style.webkitAnimationName = "color-animation"; |
| elem.style.webkitAnimationDuration = (i + 1).toString() + "s"; |
| elem.style.webkitAnimationIterationCount = "infinite"; |
| } |
| var transformed_elem = document.getElementById("transformed-elem0"); |
| transformed_elem.style.left = "250px"; |
| transformed_elem.style.top = "250px"; |
| transformed_elem.style.webkitAnimationName = "transform-animation"; |
| transformed_elem.style.webkitAnimationDuration = "5s"; |
| transformed_elem.style.webkitAnimationIterationCount = "infinite"; |
| } |
| |
| window.addEventListener('load', startExperiment, false); |
| </script> |
| </head> |
| <body> |
| <div class="gradient"></div> |
| <div id="elem0"><div class="gradient"></div></div> |
| <div id="elem1"><div class="gradient"></div></div> |
| <div id="transformed-elem0"><p class="poster">?</p></div> |
| </body> |
| </html> |
