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 ;
            -ms-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;}
        }
        @-ms-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;}
        }
  • 相关阅读:
    RAID技术
    敏捷开发
    如何写出高质量的代码?现在知道还不晚
    Java大型互联网架构技术经验
    Chrome精品插件
    2018 java BAT最新面试宝典
    Java成神之路(2018版)
    三分钟读懂摘要算法
    我的Mac应用清单
    事务隔离级别
  • 原文地址:https://www.cnblogs.com/hgj123/p/3781494.html
Copyright © 2011-2022 走看看