<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> Taiji FIG. </ Title>
<style type = "text / CSS">
* {
margin: 0;
padding: 0;
}
body {
background-Color: #ddd;
}
.boxs {
the display: Flex;
align = left-items: Center;
width: 200px;
height: 200px;
margin: Auto 100px;
/ * downward from each accounted for 50% variation from black ! a white process * /
background: Linear-gradient (50% # 000, # FFF 50%);
border-RADIUS: 50%
}
/ * select the next character to create two small circular interior with css3 pseudo object, Since <i> tag is an elastic arrangement,
and is provided align-items: center attributes, create internal vertical centering elements: * /
.boxs before ::, :: After .boxs {
Content: "";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
background: rgb(11, 189, 165);
}
.boxs::before{
background:radial-gradient(#fff 25%, #000 25%);
transform-origin: 0% 50%;
animation-name: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.boxs::after{
background:radial-gradient(#000 25%, #fff 25%);
transform-origin: 100% 50%;
animation-name: move;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: -1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/ * Keyframes (@keyframes) and animation property animation:
creating animation, a change from the original size of 0.7 times to 1.3 times: * /
@keyframes {Move
from {
Transform: Scale (0.7);
}
to {
Transform: Scale ( 1.3);
}
}
</style>
</head>
<body>
<i class="boxs"></i>
</body>
</html>