效果如图:
<style type=
"text/css"
>
#yin-yang {
width
:
96px
;
height
:
48px
;
background
:
#eee
;
border-color
:
red
;
border-style
:
solid
;
border-width
:
2px
2px
50px
2px
;
border-radius:
100%
;
position
:
relative
;
-webkit-animation:
circle
3
s infinite linear;
/*匀速 循环*/
}
@-webkit-keyframes
circle
{
0%
{
transform: rotate(
0
deg);
}
100%
{
transform: rotate(
360
deg);
}
}
#yin-yang:before {
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
0
;
background
:
#eee
;
border
:
18px
solid
red
;
border-radius:
100%
;
width
:
12px
;
height
:
12px
;
}
#yin-yang:after {
content
:
""
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
background
:
red
;
border
:
18px
solid
#eee
;
border-radius:
100%
;
width
:
12px
;
height
:
12px
;
}
</style>
<div id=
"yin-yang"
></div>