css3探测光圈_CSS3光圈发散动画CSS
语⾔：
CSSSCSS
确定
html,
body {
height: 100%;
}
body {
background: #1a1a1d;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
borderbox.block {
width: 500px;
height: 500px;
}
.sq_18 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-
webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_17 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(340deg);
-ms-transform: rotate(340deg); transform: rotate(340deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_16 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(320deg);
-ms-transform: rotate(320deg); transform: rotate(320deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_15 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg); transform: rotate(300deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_14 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(280deg);
-ms-transform: rotate(280deg); transform: rotate(280deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_13 {
position: absolute;
display: inline-block;
-
webkit-transform: rotate(260deg);
-ms-transform: rotate(260deg); transform: rotate(260deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_12 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg); transform: rotate(240deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.
sq_11 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(220deg);
-ms-transform: rotate(220deg); transform: rotate(220deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_10 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(200deg);
-
ms-transform: rotate(200deg); transform: rotate(200deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_9 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg); transform: rotate(180deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_8 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg); transform: rotate(160deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center;
transform-origin: right center;
}
.sq_7 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(140deg);
-
ms-transform: rotate(140deg); transform: rotate(140deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_6 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg); transform: rotate(120deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_5 {
position: absolute;
display: inline-block;
-webkit-transform: rotate(100deg);
-ms-transform: rotate(100deg); transform: rotate(100deg);
-webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;
}
.sq_4 {
position: absolute;