css车的操作,CSS3 汽车启动按钮

CSS

语言：

CSSSCSS

确定

body {

background: #131c20;

margin: 0;

}

#w {

width: 150px;

height: 150px;

background: #1d2930;

position: absolute;

top: 50%;

left: 50%;

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

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

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

z-index: -1;

border-radius: 50%;

}

.a,

.b {

width: 0px;

height: 0px;

background: transparent;

position: absolute;

left: 50%;

top: 50%;

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

-ms-transform: translate(-50%, -50%) rotate(90deg);

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

border-radius: 50%;

border: 100px transparent solid;

box-shadow: -1px 1px 0 #e0e7eb;

-webkit-animation: k2 1s ease alternate infinite;

animation: k2 1s ease alternate infinite;

}

.a:after,

.b:after {

content: "";

position: absolute;

top: 190%;

left: 190%;

right: 0;

bottom: 0;

background: #e0e7eb;

border-radius: 50%;

-webkit-animation: k1 1s ease alternate infinite;

animation: k1 1s ease alternate infinite;

}

.b {

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

-ms-transform: translate(-50%, -50%) rotate(270deg);

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

}

#x {

left: 49%;

}

#z {

left: 51%;

}

@-webkit-keyframes k1 {

0% {

top: 190%;

left: 190%;

}

100% {

top: -20%;

left: -20%;

}

}

@keyframes k1 {

0% {

top: 190%;

left: 190%;

}

100% {

top: -20%;

left: -20%;

}

}

@-webkit-keyframes k2 {

0% {

height: 100px;

width: 100px;

border: 50px transparent solid;

}

100% {

height: 0px;

width: 0px;

border: 100px transparent solid;

}

}

@keyframes k2 {

0% {

height: 100px;

width: 100px;

border: 50px transparent solid;

}

100% {

height: 0px;

width: 0px;

border: 100px transparent solid;

}

}