仅用CSS3创建h5预加载旋转圈

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.quan{

position: relative;

border: 4px solid rgba(255,255,255,.25);

width: 80px;

height: 80px;

border-radius: 50%;

-webkit-animation: a 1s infinite linear;

}

span{

position: absolute;

width: 80px;

height: 80px;

border: 4px solid transparent;

border-top: 4px solid #fff;

top: -4px;

left: -4px;

border-radius: 50%;

 

}

@-webkit-keyframes a{

0%{-webkit-transform: rotate(0deg);}

100%{-webkit-transform: rotate(360deg);}

}

</style>

</head>

<body style="background-color: palevioletred;">

<div class="quan">

<span id=""></span>

</div>

</body>

posted @ 2016-07-30 15:51  Milk.╮  阅读(573)  评论(0编辑  收藏  举报