• css3 图片放大缩小闪烁效果


    直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>css3 图片放大缩小闪烁效果</title>

    <style>
    body{background:#000;opacity:0.8;}

    .flicker_down{
    105px;
    height:105px;
    display:inline-block;
    position:fixed;
    bottom:80px;
    left:50%;
    background:url("images/last.png") no-repeat;

    }
    @keyframes flicker{
    0%,100%{
    transform:scale(0.6);
    -moz-transform:scale(0.6);
    -o-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -ms-transform:scale(0.6);
    opacity:0
    }
    50%{
    transform:scale(1.0);
    -moz-transform:scale(1.0);
    -o-transform:scale(1.0);
    -webkit-transform:scale(1.0);
    -ms-transform:scale(1.0);
    opacity:1
    }

    }
    @-webkit-keyframes flicker{
    0%,100%{
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
    -o-transform:scale(0.6);
    -ms-transform:scale(0.6);
    transform:scale(0.6);
    opacity:0
    }
    50%{
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -o-transform:scale(1.0);
    -ms-transform:scale(1.0);
    transform:scale(1.0);
    opacity:1
    }

    }
    @-moz-keyframes flicker{
    0%,100%{
    -moz-transform:scale(0.6);
    -o-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -ms-transform:scale(0.6);
    transform:scale(0.6);
    opacity:0
    }
    50%{
    -moz-transform:scale(1.0);
    -o-transform:scale(1.0);
    -webkit-transform:scale(1.0);
    -ms-transform:scale(1.0);
    transform:scale(1.0);
    opacity:1
    }

    }
    @-o-keyframes flicker{
    0%,100%{
    -o-transform:scale(0.6);
    -moz-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -ms-transform:scale(0.6);
    transform:scale(0.6);
    opacity:0
    }
    50%{
    -o-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -webkit-transform:scale(1.0);
    -ms-transform:scale(1.0);
    transform:scale(1.0);
    opacity:1
    }

    }
    .flicker_down .trans{
    -webkit-animation:flicker 2.0s infinite ease-in-out;
    -moz-animation:flicker 2.0s infinite ease-in-out;
    -o-animation:flicker 2.0s infinite ease-in-out;
    animation:flicker 2.0s infinite ease-in-out
    }
    .flicker_down .arrow{
    animation-delay:-2.0s;
    -webkit-animation-delay:-2.0s;
    -moz-animation-delay:-2.0s;
    -o-animation-delay:-2.0s
    }

    </style>
    </head>
    <body>
    <div>

    <a class="flicker_down arrow  trans" href="" onclick="return false;" hidefocus=""></a>

    </div>
    </body>
    </html>

  • 相关阅读:
    如何快速取得股票交易历史数据
    ArcSDE性能优化系列之ArcSDE参数篇
    2020年8月29日
    2020年8月31日
    9.2
    2020年8月25日
    2020年8月30日
    2020年8月27日
    2020年8月26日
    2020年8月28日
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/5578489.html
Copyright © 2020-2023  润新知