spin

来源:互联网 发布:nginx日志分析软件 编辑:程序博客网 时间:2024/03/29 14:50
<!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>
0 0
原创粉丝点击