Created
December 17, 2012 00:20
-
-
Save maxw3st/4314543 to your computer and use it in GitHub Desktop.
A CodePen by Rachel Nabors. Clipping Masquerade - Playing about with CSS clipping masks. Webkit browsers only for now, I'm afraid!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="lady"> | |
| </div> | |
| <!-- | |
| You can do it, too: http://css-tricks.com/webkit-image-wipes/ | |
| Theme song: "Hold the Night" by Lyre Le Temps | |
| Still need a name for her. Suggestions welcome! | |
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .lady { | |
| animation: skin linear 10s alternate infinite; | |
| mask-image: url('http://stash.rachelnabors.com/codepen/clippingmasquerade/ux_mask.png'); | |
| background: url('http://stash.rachelnabors.com/codepen/clippingmasquerade/cloth.jpg'); | |
| margin: 1em auto; | |
| width: 350px; height: 716px; | |
| } | |
| @keyframes skin { | |
| 100% { | |
| background-position: 100% 100%; | |
| } | |
| } | |
| body { | |
| background: #666 url(http://stash.rachelnabors.com/codepen/clippingmasquerade/vertical_cloth.png); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CSS animation by Rachel Nabors. Animating a background behind a clipping mask. Replace the urls above with links to your own background and masking images.