<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>demo show</title>
<style>
html{ height:100%; }
body{
background-color:#eee;
display:-webkit-flex;
display:flex;
margin:0;
min-height:100%;
}
.go{
-webkit-animation:rotate 4s linear infinite;
background:linear-gradient(#fff 50%, #000 50%);
border-radius:50%;
box-shadow:0 0 10px #ccc;
height:200px;
margin:auto;
position:relative;
transition:.4s;
width:200px;
}
.go:hover{
height:230px;
width:230px;
}
@-webkit-keyframes rotate{ to{ -webkit-transform:rotate(360deg); } }
.go:before,
.go:after{
background:radial-gradient(50% 50%, #fff 20%, #000 20%);
content:"";
border-radius:50%;
height:50%;
left:0;
position:absolute;
top:25%;
width:50%;
}
.go:after{
background:radial-gradient(50% 50%, #000 20%, #fff 20%);
left:50%;
}
</style>
</head>
<body>
<div class="go"></div><!-- end go -->
</body>
</html>