h5加载过程的小圈

2018-03-01 10:58:34来源:segmentfault作者:悠讓人点击

分享

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.onload_circle {
background-color: rgba(255,255,255,0.5);
position: fixed;
top: 50%;
left: 50%;
margin-top: -26px;
margin-left: -26px;
width: 50px;
height: 50px;
border: 1px solid orange;
border-radius: 50%;
transform-origin: center center;
animation: rotate1s infinite linear;
transition: all 1s;
}.ball {
display: inline-block;
width: 6px;
height: 6px;
background-color: red;
border-radius: 50%;
position: absolute;
left: -3px;
top: 23px;
}
@keyframes rotate{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台