Complete CSS3 + HTML5 music video ('-' * 33) Full how-to at 24ways.org: http://24ways.org/2012/flashless-animation/
You probably have seen me working on the different parts of this: The walk cycle, the running animation, the music looping, the parallax. Here it comes all together.
Music is "The Girl in Byakkoya" by Susumu Hirasawa.
A Pen by Rachel Nabors on CodePen.
| body { margin: 0;padding: 0;background-color: #f3f3f3} | |
| .box{ | |
| margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;/*绝对居中*/ | |
| padding: 30px 40px; | |
| width: 400px;height: 141px;background-color: #fff;box-shadow: 1px 1px 3px rgba(0,0,0,0.2); | |
| } | |
| .box:before, .box:after { | |
| content: ''; | |
| position: absolute; | |
| z-index: -2; |
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- Run in full-screen mode. --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- Make the status bar black with white text. --> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- Run in full-screen mode. --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- Make the status bar black with white text. --> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |