Heim > Artikel > Web-Frontend > css定义多重背景动画_html/css_WEB-ITnose
css定义多重背景动画_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:461074Durchsuche
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sublime Text 使用简介_html/css_WEB-ITnoseNächster Artikel：Animation动画之AlphaAnimation（透明度变化）_html/css_WEB-ITnose