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>

 

转载于:https://www.cnblogs.com/phpyangbo/p/8388834.html