Home > Article > Web Front-end > css定义多重背景动画_html/css_WEB-ITnose
css定义多重背景动画_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:461073browse
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">*{margin: 0; padding: 0; border: 0;}@keyframes animatedBird {from { background-position: 20px 20px, 30px 80px, 0 0; }to { background-position: 300px -90px, 30px 20px, 100% 0; }}@-webkit-keyframes animatedBird {from { background-position: 20px 20px, 30px 80px, 0 0; }to { background-position: 300px -90px, 30px 20px, 100% 0; }}@-ms-keyframes animatedBird {from { background-position: 20px 20px, 30px 80px, 0 0; }to { background-position: 300px -90px, 30px 20px, 100% 0; }}@-moz-keyframes animatedBird {from { background-position: 20px 20px, 30px 80px, 0 0; }to { background-position: 300px -90px, 30px 20px, 100% 0; }}.animate-area{ margin: 100px auto 0;width: 560px; height: 190px; background-image: url('http://static.oschina.net/uploads/space/2015/0814/152322_gbDp_2435847.png'), url('http://static.oschina.net/uploads/space/2015/0814/152322_7IfI_2435847.png'), url('http://static.oschina.net/uploads/space/2015/0814/152322_Xtfs_2435847.png');background-position: 20px -90px, 30px 80px, 0px 0px;background-repeat: no-repeat, no-repeat, repeat-x;animation: animatedBird 4s linear infinite;-ms-animation: animatedBird 4s linear infinite;-moz-animation: animatedBird 4s linear infinite;-webkit-animation: animatedBird 4s linear infinite;overflow: hidden;}</style></head><body><div class="animate-area"></div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Sublime Text 使用简介_html/css_WEB-ITnoseNext article：Animation动画之AlphaAnimation（透明度变化）_html/css_WEB-ITnose