zoukankan      html  css  js  c++  java
  • CSS3,JS可用于刷新按钮或者加载动画的动画

    html:

    <input type="button" id="zidong3" style="top: 12px;" />

    css:

    #zidong3
    {
    position: absolute;
    top: 7px;
    right: 7px;
    24px;
    height: 24px;
    border: none;
    background: #fff url(../images/refresh.png) no-repeat;
    background-size: 100% 100%;
    /*background-position: -1px 5px;*/
    border-radius: 50%;
    }

    /*重点:*/

    @-webkit-keyframes gira {
    from{-webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(360deg);}
    }

    @keyframes gira {
    from{-webkit-transform: rotate(0deg); transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg); transform: rotate(360deg)}
    }

    JS:

    $("#zidong3").click(function () {
    $(this).css("-webkit-animation", "gira 1s ease-out 1");
    $(this).css("-ms-animation", "gira 1s ease-out 1");
    $(this).css("animation", "gira 1s ease-out 1");
    var z = $(this);
    setTimeout(function () {
    $(z).css("animation", "");
    }, 1000);
    //getGPS();//获取位置
    });

    有时间说明

  • 相关阅读:
    学习笔记
    核心网概要学习
    python基础知识
    python_基础知识_py运算符
    python_基础知识
    将博客搬至CSDN
    poj1182测试数据过了,但A不了,暂时放在这,以后再看
    score——3354
    杭电1241
    杭电1010(WA)
  • 原文地址:https://www.cnblogs.com/ruoyuting/p/5507467.html
Copyright © 2011-2022 走看看