css 模拟器方向_CSS3 周边旋转的组合图标

CSS

语言：

CSSSCSS

确定

body {

background: #eee;

}

._positionCenter,

.container,

.ring,

.ring:after,

.logo img {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

}

.container {

width: 90px;

height: 90px;

}

.ring {

overflow: hidden;

background: #fff;

border-radius: 50%;

}

.ring:after {

width: 100%;

height: 100%;

clip: rect(0, 45px, 90px, 0);

content: '';

}

.outer {

width: 100%;

height: 100%;

}

.outer:after {

background: #4285f4;

-webkit-animation: rotate 1s 0s ease-in-out infinite;

}

.middle {

width: 90%;

height: 90%;

}

.middle:after {

background: #00b386;

-webkit-animation: rotate 1s 0.1s ease-in-out infinite;

}

.inner {

width: 80%;

height: 80%;

}

.inner:after {

background: #ff8332;

-webkit-animation: rotate 1s 0.2s ease-in-out infinite;

}

.logo {

width: 70%;

height: 70%;

background: #fff;

clip: rect(0, 90px, 90px, 0);

}

@-webkit-keyframes rotate {

0% {

-webkit-transform: translate(-50%, -50%) rotate(0deg);

}

100% {

-webkit-transform: translate(-50%, -50%) rotate(359deg);

}

}