zoukankan      html  css  js  c++  java
  • css定义多重背景动画

    展示效果

    <!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>
    View Code
  • 相关阅读:
    010 排序: 冒泡 选择
    洛谷 P1540 机器翻译
    洛谷 P1011 车站
    周期串
    2019.03.29 大数据图解
    2019.03.29 算法解读
    2019.03.28 博客反省
    2019.03.27 常用的模块
    2019.03.25 git
    2019.03.25 Ajax三级联动
  • 原文地址:https://www.cnblogs.com/brittany/p/4730309.html
Copyright © 2011-2022 走看看