zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    DSP Builder设计一个滤波器
    Modelsim 10.0 对Altera FFT IP 进行仿真
    FPGA内部计算小数
    TIOBE 2012年3月编程语言排行榜:JS超越Perl和Python
    转载 10个新鲜的Ajax相关的jQuery插件
    转载 使用HTML5、CSS3和jQuery增强网站用户体验
    转载 Java堆内存的10个要点
    累 腾讯笔试
    python 浮点数取整
    转载 一个页面重构工程师眼中的“用户体验”
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/5578489.html
Copyright © 2011-2022 走看看