html中半圆怎么写,半圆效果.html

半圆角

body {

padding-left: 100px;

padding-top: 100px;

background-color: #40479a;

}

.outter-circle {

position: relative;

width: 200px;

display: inline-block;

height: 100px;

box-sizing: border-box;

border-radius: 200px 200px 0 0;

border: 4px solid #859900;

border-bottom-style: none;

}

.inner-circle {

position: absolute;

top: -3px;

left: -3px;

z-index: -1;

box-sizing: border-box;

width: 198px;

height: 198px;

border-radius: 50%;

border: 2px solid #ddd;

}

.outter-circle-big {

position: relative;

width: 240px;

height: 120px;

box-sizing: border-box;

border-radius: 240px 240px 0 0;

border: 6px solid #2AA198;

border-bottom-style: none;

}

.inner-circle-big {

position: absolute;

top: -4px;

left: -4px;

z-index: -1;

box-sizing: border-box;

width: 237px;

height: 237px;

border-radius: 50%;

border: 3px solid #ddd;

}

.circle-box-wrapper {

position: relative;

width: 240px;

height: 240px;

}

.circle-one {

width: 240px;

height: 240px;

animation: circleMoveTwo 1400ms infinite;

}

.circle-two {

position: absolute;

left: 20px;

top: 20px;

width: 200px;

height: 200px;

animation: circleMoveOne 1300ms infinite;

}

@keyframes circleMoveOne {

10% {

transform: rotate(36deg);

-webkit-transform: rotate(36deg);

-moz-transform: rotate(36deg);

-o-transform: rotate(36deg);

-ms-transform: rotate(36deg);

}

20% {

transform: rotate(72deg);

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-o-transform: rotate(72deg);

-ms-transform: rotate(72deg);

}

30% {

transform: rotate(108deg);

-webkit-transform: rotate(108deg);

-moz-transform: rotate(108deg);

-o-transform: rotate(108deg);

-ms-transform: rotate(108deg);

}

40% {

transform: rotate(144deg);

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-o-transform: rotate(144deg);

-ms-transform: rotate(144deg);

}

50% {

transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

}

60% {

transform: rotate(216deg);

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-o-transform: rotate(216deg);

-ms-transform: rotate(216deg);

}

70% {

transform: rotate(252deg);

-webkit-transform: rotate(252deg);

-moz-transform: rotate(252deg);

-o-transform: rotate(252deg);

-ms-transform: rotate(252deg);

}

80% {

transform: rotate(288deg);

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-o-transform: rotate(288deg);

-ms-transform: rotate(288deg);

}

90% {

transform: rotate(324deg);

-webkit-transform: rotate(324deg);

-moz-transform: rotate(324deg);

-o-transform: rotate(324deg);

-ms-transform: rotate(324deg);

}

100% {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

}

}

@keyframes circleMoveTwo {

from {

transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-o-transform: rotate(0deg);

-ms-transform: rotate(0deg);

}

to {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史