zoukankan      html  css  js  c++  java
  • 头像跳动 动画

    一、css

    .first {
        width: 128px;
        height: 128px;
        opacity: 1;
        z-index: 6;
        font-size: 22px;
    -webkit-animation-duration: 1.5s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: both;
        -webkit-animation-iteration-count: infinite;
    
        -moz-animation-duration: 1.5s;
        -moz-animation-timing-function: ease;
        -moz-animation-fill-mode: both;
        -moz-animation-iteration-count: infinite;
    
        -ms-animation-duration: 1.5s;
        -ms-animation-timing-function: ease;
        -ms-animation-fill-mode: both;
        -ms-animation-iteration-count: infinite;
    
        animation-duration: 1.5s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
    }
    .first img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #346fe0;
        box-shadow: 0 0 40px 6px #0927c1;
    }
    @-webkit-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
        40% {-webkit-transform: translateY(-20px);}
        60% {-webkit-transform: translateY(-10px);}
    }
    
    @-moz-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
        40% {-moz-transform: translateY(-20px);}
        60% {-moz-transform: translateY(-10px);}
    }
    
    @-ms-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
        40% {-ms-transform: translateY(-20px);}
        60% {-ms-transform: translateY(-10px);}
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-20px);}
        60% {transform: translateY(-10px);}
    }
    .first.bounce {
        -webkit-animation-name: bounce;
        -moz-animation-name: bounce;
        -ms-animation-name: bounce;
        animation-name: bounce;
    }

    二、html

    <ul>
                <li class="first bounce"><img src="images/1.jpg"><span>98</span></li>
                <li class="second bounce"><img src="images/2.jpg"><span>58</span></li>
                <li class="third bounce"><img src="images/3.jpg"><span>245</span></li>
    </ul>
  • 相关阅读:
    win7下64位系统memcache/memcached安装教程
    支付宝接口使用文档说明 支付宝异步通知(notify_url)与return_url.
    PHP使用DES进行加密解密
    使用PHP对文件进行压缩解压(zip)
    发一个天气预报接口
    使用php发送电子邮件(phpmailer)
    在线支付接口详解
    php 操作数组 (合并,拆分,追加,查找,删除等)
    PHP5中魔术方法
    Ehlib 学习
  • 原文地址:https://www.cnblogs.com/candy-Yao/p/9242084.html
Copyright © 2011-2022 走看看