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>

  • 相关阅读:
    gorm 更新数据时,0值会被忽略
    xshell评估过期解决办法
    安装zoom
    aria2 加速百度网盘下载
    ubuntu17.10 安装firefox的flash
    c++ 回调函数使用
    ubuntu17 安装中文输入法
    ubuntu python3.6 找不到_sqlite3
    linux 获取CPU个数
    centos7 yum与Python3冲突
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/5578489.html
Copyright © 2011-2022 走看看