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;}
        }
  • 相关阅读:
    多表连接查询
    从0开始独立完成企业级Java电商网站开发(服务端)
    ThreadLocal小试牛刀
    svn版本控制
    策略模式和工厂模式搭配使用
    MyBatis-Plus
    github骚操作
    【测试】 Java如何优雅的生成测试数据
    【随笔】开源之殇
    【Maven】maven 插件开发实战
  • 原文地址:https://www.cnblogs.com/hgj123/p/3781494.html
Copyright © 2011-2022 走看看