zoukankan      html  css  js  c++  java
  • css3如何让div一直循环自转圈,附带:网络请求通知图片一直在转圈实例

    css3如何让div一直循环自转圈

    代码如下:

    div{
     -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate 3s linear infinite;
        -moz-animation: rotate 3s linear infinite;
        -o-animation: rotate 3s linear infinite;
        animation: rotate 3s linear infinite;}
    @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
        to{-webkit-transform: rotate(360deg)}
    }
    @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
        to{-moz-transform: rotate(359deg)}
    }
    @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
        to{-o-transform: rotate(359deg)}
    }
    @keyframes rotate{from{transform: rotate(0deg)}
        to{transform: rotate(359deg)}
    }

    效果如下:

    以上效果图,是一个《网络请求通知》实例,一直在转圈的实例,实例代码如下:

    《网络请求通知图片一直在转圈实例》

    CSS:

    /*网络请求通知*/
    .web_request{
        position: fixed;
        z-index: 9999;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    }
    .web_request_body{
        width:40px;
        height:40px;
        margin:0 auto;
        margin-top:10%;
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate 1.5s linear infinite;
        -moz-animation: rotate 1.5s linear infinite;
        -o-animation: rotate 1.5s linear infinite;
        animation: rotate 1.5s linear infinite;
    }
    @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
        to{-webkit-transform: rotate(360deg)}
    }
    @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
        to{-moz-transform: rotate(359deg)}
    }
    @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
        to{-o-transform: rotate(359deg)}
    }
    @keyframes rotate{from{transform: rotate(0deg)}
        to{transform: rotate(359deg)}
    }
    .web_request_body_background{
        position: absolute;
        width:40px;
        height:40px;
        background:#000;
        opacity:0.2;
        border-radius:50%;
    }
    .web_request_body_icon{
        position: absolute;
    }
    .web_request_body_icon img{
        margin-top:5px;
        margin-left:5px;
        width:30px;
        height:30px;
    }

    HTML:

    <!--网络请求通知-->
    <div class="web_request">
        <div class="web_request_body">
            <div class="web_request_body_background"></div>
            <div class="web_request_body_icon"><img src="/cai_img/fot_bz.png" /></div>
        </div>
    </div>
  • 相关阅读:
    第五届“飞思卡尔”智能车竞赛分赛区赛后总结
    最佳编程语录
    通过UserAgent判断智能手机(设备,Android,IOS)
    Sql Server 系统存储过程分析 2 数据库引擎存储过程
    OutputCache 导致页面下载的解决办法
    w3wp.exe(IIS ) CPU 占用 100% 的常见原因及解决办法
    过滤并替换页面html输出
    Sql Server 系统存储过程分析 1 目录存储过程
    Sql Server 监控 Job 执行情况
    OutPutCache 自定义缓存:session、登录用户、cookie 等
  • 原文地址:https://www.cnblogs.com/phpyangbo/p/8388834.html
Copyright © 2011-2022 走看看