zoukankan      html  css  js  c++  java
  • 动画渐变兼容各个浏览器

    .destination1 .current{
    display:block;
    animation:danru 2s linear infinite;
    -webkit-animation:danru 2s linear alternate ;
    -moz-animation:danru 2s linear alternate ;
    -o-animation:danru 2s linear alternate ;

    }
    @keyframes danru{
    0% {opacity:0.00;left:0px; top:0px;}
    25% {opacity:0.25;left:50px; top:0px;}
    50% {opacity:0.50;left:100px; top:0px;}
    75% {opacity:0.75;left:150px; top:0px;}
    100% {opacity:1.0; left:200px; top:0px;}
    }

    @-webkit-keyframes danru{
    0% {opacity:0.00;left:0px; top:0px;}
    25% {opacity:0.25;left:50px; top:0px;}
    50% {opacity:0.50;left:100px; top:0px;}
    75% {opacity:0.75;left:150px; top:0px;}
    100% {opacity:1.0; left:200px; top:0px;}
    }
    @-moz-keyframes danru{
    0% {opacity:0.00;left:0px; top:0px;}
    25% {opacity:0.25;left:50px; top:0px;}
    50% {opacity:0.50;left:100px; top:0px;}
    75% {opacity:0.75;left:150px; top:0px;}
    100% {opacity:1.0; left:200px; top:0px;}
    }
    @-o-keyframes danru{
    0% {opacity:0.00;left:0px; top:0px;}
    25% {opacity:0.25;left:50px; top:0px;}
    50% {opacity:0.50;left:100px; top:0px;}
    75% {opacity:0.75;left:150px; top:0px;}
    100% {opacity:1.0; left:200px; top:0px;}
    }

  • 相关阅读:
    underscorejs
    使用CORS:跨域两三事
    line-height的小技巧
    深入探讨ES6生成器
    ES6生成器基础
    响应式网页
    javascript代码复用(四)-混入、借用方法和绑定
    javascript代码复用模式(三)
    javascript代码复用模式(二)
    jQuery基础事件
  • 原文地址:https://www.cnblogs.com/hgj123/p/3759501.html
Copyright © 2011-2022 走看看