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>

  • 相关阅读:
    DRF版本控制
    Django Rest Framework 视图和路由
    ModelSerializer
    linux下jdk安装与配置
    linux下各种安装包下载地址
    Creating mailbox file: 文件已存在
    vim常用设置
    zookeeper集群搭建与升级
    linux下shell 脚本 中windows换行符换成linux换行符
    spring注解
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/5578489.html
Copyright © 2011-2022 走看看