<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国联通logo图标</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html{
font-size: 100%;
}
body {
perspective: 1000px;
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
}
.logo {
width: 450px;
height: 450px;
margin: 100px auto 0;
position: relative;
transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
animation: UincomRotate 10s linear infinite;
-moz-animation: UincomRotate 10s linear infinite;
-webkit-animation: UincomRotate 10s linear infinite;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
@-webkit-keyframes UincomRotate {
from {
transform: rotateY(0deg) rotateZ(45deg);
-webkit-transform: rotateY(0deg) rotateZ(45deg);
}
to {
transform: rotateY(360deg) rotateZ(45deg);
-webkit-transform: rotateY(360deg) rotateZ(45deg);
}
}
body>div div {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation: UincomColor 5s linear infinite;
-moz-animation: UincomColor 5s linear infinite;
-webkit-animation: UincomColor 5s linear infinite;
}
@-webkit-keyframes UincomColor {
from {
box-shadow: 0 0 20px red;
-webkit-box-shadow: 0 0 20px red;
}
50% {
box-shadow: 0 0 50px red;
-webkit-box-shadow: 0 0 50px red;
}
to {
box-shadow: 0 0 20px red;
-webkit-box-shadow: 0 0 20px red;
}
}
body>div>div>div {
background-color: white;
animation: UincomColorInset 5s linear infinite;
-moz-animation: UincomColorInset 5s linear infinite;
-webkit-animation: UincomColorInset 5s linear infinite;
}
@-webkit-keyframes UincomColorInset {
from {
box-shadow: 0 0 20px red inset;
-webkit-box-shadow: 0 0 20px red inset;
}
to {
box-shadow: 0 0 20px red inset;
-webkit-box-shadow: 0 0 20px red inset;
}
}
/*扇形块*/
.sector {
border-radius: 100% 0 0 0;
}
/*行1*/
.sector:nth-of-type(1) {
left: 100px;
}
.sector:nth-of-type(2) {
left: 200px;
transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
}
.sector:nth-of-type(3) {
left: 300px;
}
.sector:nth-of-type(4) {
left: 400px;
transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
}
/*行3*/
.sector:nth-of-type(5) {
top: 100px;
}
.sector:nth-of-type(6) {
top: 100px;
left: 400px;
transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
/*行5*/
.sector:nth-of-type(7) {
top: 200px;
transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
-webkit-transform: rotateZ(-90deg);
}
.sector:nth-of-type(8) {
top: 200px;
left: 400px;
transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
}
/*行7*/
.sector:nth-of-type(9) {
top: 300px;
}
.sector:nth-of-type(10) {
top: 300px;
left: 400px;
transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
/*行9*/
.sector:nth-of-type(11) {
top: 400px;
transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
-webkit-transform: rotateZ(-90deg);
}
.sector:nth-of-type(12) {
top: 400px;
left: 100px;
transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
.sector:nth-of-type(13) {
top: 400px;
left: 200px;
transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
-webkit-transform: rotateZ(-90deg);
}
.sector:nth-of-type(14) {
top: 400px;
left: 300px;
transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
/*正方形*/
/*行1*/
.square:nth-of-type(15) {
left: 150px;
}
.square:nth-of-type(16) {
left: 350px;
}
/*行2*/
.square:nth-of-type(17) {
top: 50px;
left: 100px;
}
.square:nth-of-type(18) {
top: 50px;
left: 200px;
}
.square:nth-of-type(19) {
top: 50px;
left: 300px;
}
.square:nth-of-type(20) {
top: 50px;
left: 400px;
}
/*行3*/
.square:nth-of-type(21) {
top: 100px;
left: 50px;
}
.square:nth-of-type(22) {
top: 100px;
left: 100px;
}
.square:nth-of-type(23) {
top: 100px;
left: 200px;
}
.square:nth-of-type(24) {
top: 100px;
left: 300px;
}
.square:nth-of-type(25) {
top: 100px;
left: 350px;
}
/*行4*/
.square:nth-of-type(26) {
top: 150px;
}
.square:nth-of-type(27) {
top: 150px;
left: 200px;
}
/*行5*/
.square:nth-of-type(28) {
top: 200px;
left: 50px;
}
.square:nth-of-type(29) {
top: 200px;
left: 100px;
}
.square:nth-of-type(30) {
top: 200px;
left: 150px;
}
.square:nth-of-type(31) {
top: 200px;
left: 200px;
}
.square:nth-of-type(32) {
top: 200px;
left: 250px;
}
.square:nth-of-type(33) {
top: 200px;
left: 300px;
}
.square:nth-of-type(34) {
top: 200px;
left: 350px;
}
/*行6*/
.square:nth-of-type(35) {
top: 250px;
left: 200px;
}
.square:nth-of-type(36) {
top: 250px;
left: 400px;
}
/*行7*/
.square:nth-of-type(37) {
top: 300px;
left: 50px;
}
.square:nth-of-type(38) {
top: 300px;
left: 100px;
}
.square:nth-of-type(39) {
top: 300px;
left: 200px;
}
.square:nth-of-type(40) {
top: 300px;
left: 300px;
}
.square:nth-of-type(41) {
top: 300px;
left: 350px;
}
/*行8*/
.square:nth-of-type(42) {
top: 350px;
}
.square:nth-of-type(43) {
top: 350px;
left: 100px;
}
.square:nth-of-type(44) {
top: 350px;
left: 200px;
}
.square:nth-of-type(45) {
top: 350px;
left: 300px;
}
/*行9*/
.square:nth-of-type(46) {
top: 400px;
left: 50px;
}
.square:nth-of-type(47) {
top: 400px;
left: 250px;
}
/*长方形*/
.rectangle {
background: -webkit-linear-gradient(top, red 40px, #FF828E 40px);
background: -moz-linear-gradient(top, red 40px, #FF828E 40px);
background: linear-gradient(top, red 40px, #FF828E 40px);
}
/*行3*/
.rectangle:nth-of-type(48) {
top: 100px;
left: 150px;
-webkit-transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
}
.rectangle:nth-of-type(49) {
top: 100px;
left: 250px;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
/*行4*/
.rectangle:nth-of-type(50) {
top: 150px;
left: 100px;
}
.rectangle:nth-of-type(51) {
top: 150px;
left: 300px;
}
/*行6*/
.rectangle:nth-of-type(52) {
top: 250px;
left: 100px;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);