<!DOCTYPE HTML>
<html lang="utf-8">
<head>
<title>cehis</title>
<meta http-equiv="Content-type" content="text/html; utf-8">
<style type="text/css">
body {
font-size: 24px;
}
#spinxg span {
display: block;
position: absolute;
width: 20em;
height: 20em;
top: -webkit-calc(50% - 10em);
top: -moz-calc(50% - 10em);
top: calc(50% - 10em);
left: -webkit-calc(50% - 10em);
left: -moz-calc(50% - 10em);
left: calc(50% - 10em);
}
#spinxg .large-circle {
-wekbit-animation: spin1 10s linear infinite;
-moz-animation: spin1 10s linear infinite;
-o-animation: spin1 10s linear infinite;
animation: spin1 10s linear infinite;
}
#spinxg .small-circle {
-wekbit-animation: spin1 20s linear infinite;
-moz-animation: spin1 20s linear infinite;
-o-animation: spin1 20s linear infinite;
animation: spin1 20s linear infinite;
}
#spinxg .smallsc {
width: 4em;
height: 4em;
position: absolute;
left: -webkit-calc(50% - 2em);
left: -moz-calc(50% - 2em);
left: calc(50% - 2em);
top: -webkit-calc(50% - 15em);
top: -moz-calc(50% - 15em);
top: calc(50% - 15em);
-webkit-transform-origin: 50% 15em;
-moz-transform-origin: 50% 15em;
-o-transform-origin: 50% 15em;
transform-origin: 50% 15em;
}
#spinxg .smallsc:nth-child(1) {
background: rgba(16,63,236,0.75);
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
transform: rotateZ(0);
}
#spinxg .smallsc:nth-child(2) {
background: rgba(37,172,162,0.75);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
#spinxg .smallsc:nth-child(3) {
background: rgba(233,124,32,0.75);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
#spinxg .smallsc:nth-child(4) {
background: rgba(235,67,35,0.75);
-webkit-transform: rotateZ(135deg);
-moz-transform: rotateZ(135deg);
transform: rotateZ(135deg);
}
#spinxg .smallsc:nth-child(5) {
background: rgba(190,28,65,0.75);
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
#spinxg .smallsc:nth-child(6) {
background: rgba(208,57,159,0.75);
-webkit-transform: rotateZ(225deg);
-moz-transform: rotateZ(225deg);
transform: rotateZ(225deg);
}
#spinxg .smallsc:nth-child(7) {
background: rgba(150,32,198,0.75);
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
#spinxg .smallsc:nth-child(8) {
background: rgba(95,33,203,0.75);
-webkit-transform: rotateZ(315deg);
-moz-transform: rotateZ(315deg);
transform: rotateZ(315deg);
}
#spinxg .circle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#spinxg .squire {
-webkit-border-radius: 25%;
-moz-border-radius: 25%;
border-radius: 25%;
}
#spinxg .lcircle {
position: absolute;
width: 12.5em;
height: 12.5em;
border-top: .1px solid rgba(255, 255, 255, 0.4);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
top: -webkit-calc(50% - 12.5em);
top: -moz-calc(50% - 12.5em);
top: calc(50% - 12.5em);
left: -webkit-calc(50% - 6.25em);
left: -moz-calc(50% - 6.25em);
left: calc(50% - 6.25em);
-webkit-box-shadow: 0 1em 2em rgba(0,0,0,0.5);
-moz-box-shadow: 0 1em 2em rgba(0,0,0,0.5);
box-shadow: 0 1em 2em rgba(0,0,0,0.5);
-webkit-transform-origin: 50% 12.5em;
-moz-transform-origin: 50% 12.5em;
-o-transform-origin: 50% 12.5em;
transform-origin: 50% 12.5em;
}
#spinxg .lcircle:nth-child(1) {
background: rgba(16,63,236,0.75);
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
transform: rotateZ(0);
}
#spinxg .lcircle:nth-child(2) {
background: rgba(37,172,162,0.75);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
#spinxg .lcircle:nth-child(3) {
background: rgba(233,124,32,0.75);
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
#spinxg .lcircle:nth-child(4) {
background: rgba(235,67,35,0.75);
-webkit-transform: rotateZ(135deg);
-moz-transform: rotateZ(135deg);
transform: rotateZ(135deg);
}
#spinxg .lcircle:nth-child(5) {
background: rgba(190,28,65,0.75);
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
#spinxg .lcircle:nth-child(6) {
background: rgba(208,57,159,0.75);
-webkit-transform: rotateZ(225deg);
-moz-transform: rotateZ(225deg);
transform: rotateZ(225deg);
}
#spinxg .lcircle:nth-child(7) {
background: rgba(150,32,198,0.75);
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
#spinxg .lcircle:nth-child(8) {
background: rgba(95,33,203,0.75);
-webkit-transform: rotateZ(315deg);
-moz-transform: rotateZ(315deg);
transform: rotateZ(315deg);
}
#spinxg .content-circle {
-wekbit-animation: spin 30s linear infinite;
-moz-animation: spin 20s linear infinite;
-o-animation: spin 30s linear infinite;
animation: spin 30s linear infinite;
}
#spinxg .squircicle {
background: rgba(30,7,66,0.65);
width: 15em;
height: 15em;
position: absolute;
top: -webkit-calc(50% - 7.5em);
top: -moz-calc(50% - 7.5em);
top: calc(50% - 7.5em);
left: -webkit-calc(50% - 7.5em);
left: -moz-calc(50% - 7.5em);
left: calc(50% - 7.5em);
border: none;
-webkit-border-radius: 25%;
-moz-border-radius: 25%;
border-radius: 25%;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
@-webkit-keyframes spin1 {
0% {
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
@-moz-keyframes spin1 {
0% {
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
} }
@-o-keyframes spin1 {
0% {
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
@keyframes spin1 {
0% {
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(0.8) rotateZ(180deg);
-moz-transform: scale(0.8) rotateZ(180deg);
transform: scale(0.8) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
-moz-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
@-moz-keyframes spin {
0% {
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(0.8) rotateZ(180deg);
-moz-transform: scale(0.8) rotateZ(180deg);
transform: scale(0.8) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
-moz-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
@-o-keyframes spin {
0% {
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(0.8) rotateZ(180deg);
-moz-transform: scale(0.8) rotateZ(180deg);
transform: scale(0.8) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
-moz-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(0.8) rotateZ(180deg);
-moz-transform: scale(0.8) rotateZ(180deg);
transform: scale(0.8) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
-moz-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div id="spinxg">
<span class="large-circle">
<div class="lcircle one"></div>
<div class="lcircle two"></div>
<div class="lcircle three"></div>
<div class="lcircle four"></div>
<div class="lcircle five"></div>
<div class="lcircle six"></div>
<div class="lcircle seven"></div>
<div class="lcircle eight"></div>
</span>
<span class="small-circle">
<div class="smallsc circle one"></div>
<div class="smallsc squire two"></div>
<div class="smallsc circle three"></div>
<div class="smallsc squire four"></div>
<div class="smallsc circle five"></div>
<div class="smallsc squire six"></div>
<div class="smallsc circle seven"></div>
<div class="smallsc squire eight"></div>
</span>
<span class="content-circle">
<div class="content squircicle"></div>
</span>
</div>
</body>
</html>
spin
最新推荐文章于 2022-08-01 20:15:05 发布