/* reset */
html {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
body,input,select,textarea,button {
font-family:'Microsoft Yahei','Helvetica Neue',Helvetica,'Lucida Grande',Arial,'Hiragino Sans GB','WenQuanYi Micro Hei',STHeiti,SimSun,sans-serif;
}
body,h1,h2,h3,h4,p,ul,ol,dd,dl,form {
margin:0;
}
hr {
margin-top:20px;
margin-bottom:20px;
border:0;
border-top:1px solid #eee;
}
img {
max-width:100%;
height:auto;
vertical-align:top;
-ms-interpolation-mode:bicubic;
border:0;
}
ul {
padding-left:0;
list-style-type:none;
}
a {
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
text-decoration:none;
outline:0;
}
/*工具*/
.fix {
*zoom:1;
*clear:both;
}
.fix:before,.fix:after {
display:table;
clear:both;
content:'';
}
.oh {
overflow:hidden;
*zoom:1;
}
.l {
float:left;
}
.r {
float:right;
}
.dib {
display:inline-block;
*display:inline;
*zoom:1;
}
.pr {
position:relative;
}
.pa {
position:absolute;
}
.tc {
text-align:center;
}
.tr {
text-align:right;
}
.el {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.hide {
display:none;
}
.hidetext {
font:0/0 a;
letter-spacing:-9px;
}
.arr {
display:inline-block;
overflow:hidden;
width:0;
height:0;
}
.opc0 {
opacity:0;
filter:alpha(opacity=0);
}
/* 常量设置 */
html {
overflow-x:auto;
}
html,body,.wrap {
min-width:1200px;
}
.wrap {
width:1200px;
margin-right:auto;
margin-left:auto;
}
body {
font-size:13px;
line-height:1.6;
color:#555;
background:#fff;
}
a {
color:inherit;
}
a:hover {
color:#fff;
}
::-moz-selection {
color:#fff;
background:#39f;
}
::selection {
color:#fff;
background:#39f;
}
::-webkit-input-placeholder {
color:#aaa;
}
.placeholder {
color:#aaa;
}
/*css组件设置*/
.form-control,.input-group-addon,.btn {
border-radius:2px;
}
.form-control:focus {
border-color:#66afe9;
outline:0;
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px rgba(102,175,233,0.6);
}
.main {
background:url(../image/center.jpg) center center no-repeat;
padding:120px 0;
-webkit-background-size:100% auto;
background-size:100% auto;
height:430px;
}
.menu>li {
display:block;
border-radius:50%;
color:#fff;
font-size:32px;
text-align:center;
font-weight:bold;
float:left;
position:absolute;
z-index:5;
}
.menu .li1 {
width:190px;
height:190px;
line-height:190px;
background-color:rgba(239,60,40,.6);
top:170px;
left:0;
}
/*.menu .li1:before {
content:'';
background-color:rgba(239,60,40,.6);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
*/
.menu .li2 {
width:186px;
height:186px;
line-height:186px;
background-color:rgba(250,186,17,.6);
left:154px;
top:0;
}
.menu .li3 {
width:104px;
height:104px;
line-height:104px;
background-color:rgba(64,216,44,.6);
font-size:18px;
left:415px;
top:20px;
}
.menu .li4 {
width:144px;
height:144px;
line-height:144px;
background-color:rgba(251,211,6,.6);
font-size:22px;
top:216px;
left:226px;
}
.menu .li5 {
width:208px;
height:208px;
line-height:208px;
background-color:rgba(65,216,177,.6);
font-size:36px;
left:384px;
top:190px;
}
.menu .li6 {
width:248px;
height:248px;
line-height:248px;
background-color:rgba(40,166,155,.6);
font-size:46px;
left:586px;
top:0;
}
.menu .li7 {
width:84px;
height:84px;
line-height:84px;
background-color:rgba(90,166,212,.6);
font-size:13px;
left:655px;
top:270px;
}
.menu .li8 {
width:180px;
height:180px;
line-height:180px;
background-color:rgba(164,133,172,.6);
left:796px;
top:250px;
}
.menu .li9 {
width:152px;
height:152px;
line-height:152px;
background-color:rgba(164,123,200,.6);
right:190px;
top:60px;
}
.menu .li10 {
width:168px;
height:168px;
line-height:168px;
background-color:rgba(197,122,192,.6);
right:26px;
top:200px;
}
.animation {
animation:mymove 5s linear infinite;
-moz-animation:mymove 5s linear infinite;
-webkit-animation:mymove 5s linear infinite;
-o-animation:mymove 5s linear infinite;
}
@keyframes mymove {
0% {
transform:translate(0,0);
}
20% {
transform:translate(0,10px);
}
40% {
transform:translate(0,-10px);
}
60% {
transform:translate(-10px,0);
}
80% {
transform:translate(-10px,10px);
}
100% {
transform:translate(0,0);
}
}@-webkit-keyframes mymove {
0% {
-webkit-transform:translate(0,0);
}
20% {
-webkit-transform:translate(0,10px);
}
40% {
-webkit-transform:translate(0,-10px);
}
60% {
-webkit-transform:translate(-10px,0);
}
80% {
-webkit-transform:translate(-10px,10px);
}
100% {
-webkit-transform:translate(0,0);
}
}@-moz-keyframes mymove {
0% {
-moz-transform:translate(0,0);
}
20% {
-moz-transform:translate(0,10px);
}
40% {
-moz-transform:translate(0,-10px);
}
60% {
-moz-transform:translate(-10px,0);
}
80% {
-moz-transform:translate(-10px,10px);
}
100% {
-moz-transform:translate(0,0);
}
}@-o-keyframes mymove {
0% {
-o-ransform:translate(0,0);
}
20% {
-o-transform:translate(0,10px);
}
40% {
-o-transform:translate(0,-10px);
}
60% {
-o-transform:translate(-10px,0);
}
80% {
-o-transform:translate(-10px,10px);
}
100% {
-o-transform:translate(0,0);
}
}.animation2 {
animation:mymove2 5s linear infinite;
-moz-animation:mymove2 5s linear infinite;
-webkit-animation:mymove2 5s linear infinite;
-o-animation:mymove2 5s linear infinite;
}
@keyframes mymove2 {
0% {
transform:translate(0,0);
}
20% {
transform:translate(0,-10px);
}
40% {
transform:translate(0,10px);
}
60% {
transform:translate(10px,0);
}
80% {
transform:translate(10px,-10px);
}
100% {
-webkit-transform:translate(0,0);
}
}@-webkit-keyframes mymove2 {
0% {
-webkit-transform:translate(0,0);
}
20% {
-webkit-transform:translate(0,-10px);
}
40% {
-webkit-transform:translate(0,10px);
}
60% {
-webkit-transform:translate(10px,0);
}
80% {
-webkit-transform:translate(10px,-10px);
}
100% {
-webkit-transform:translate(0,0);
}
}@-moz-keyframes mymove2 {
0% {
-moz-transform:translate(0,0);
}
20% {
-moz-transform:translate(0,-10px);
}
40% {
-moz-transform:translate(0,10px);
}
60% {
-moz-transform:translate(10px,0);
}
80% {
-moz-transform:translate(10px,-10px);
}
100% {
-moz-transform:translate(0,0);
}
}@-o-keyframes mymove2 {
0% {
-o-transform:translate(0,0);
}
20% {
-o-transform:translate(0,-10px);
}
40% {
-o-transform:translate(0,10px);
}
60% {
-o-transform:translate(10px,0);
}
80% {
-o-transform:translate(10px,-10px);
}
100% {
-o-transform:translate(0,0);
}
}.animation3 {
animation:mymove3 5s linear infinite;
-moz-animation:mymove3 5s linear infinite;
-webkit-animation:mymove3 5s linear infinite;
-o-animation:mymove3 5s linear infinite;
}
@keyframes mymove3 {
0% {
transform:translate(0,0);
}
20% {
transform:translate(-10px,0);
}
40% {
transform:translate(10px,0);
}
60% {
transform:translate(0,10px);
}
80% {
transform:translate(-10px,10px);
}
100% {
transform:translate(0,0);
}
}@-webkit-keyframes mymove3 {
0% {
-webkit-transform:translate(0,0);
}
20% {
-webkit-transform:translate(-10px,0);
}
40% {
-webkit-transform:translate(10px,0);
}
60% {
-webkit-transform:translate(0,10px);
}
80% {
-webkit-transform:translate(-10px,10px);
}
100% {
-webkit-transform:translate(0,0);
}
}@-moz-keyframes mymove3 {
0% {
-moz-transform:translate(0,0);
}
20% {
-moz-transform:translate(-10px,0);
}
40% {
-moz-transform:translate(10px,0);
}
60% {
-moz-transform:translate(0,10px);
}
80% {
-moz-transform:translate(-10px,10px);
}
100% {
-moz-transform:translate(0,0);
}
}@-o-keyframes mymove3 {
0% {
-o-transform:translate(0,0);
}
20% {
-o-transform:translate(-10px,0);
}
40% {
-o-transform:translate(10px,0);
}
60% {
-o-transform:translate(0,10px);
}
80% {
-o-transform:translate(-10px,10px);
}
100% {
-o-transform:translate(0,0);
}
}.animation4 {
animation:mymove4 5s linear infinite;
-moz-animation:mymove4 5s linear infinite;
-webkit-animation:mymove4 5s linear infinite;
-o-animation:mymove4 5s linear infinite;
}
@keyframes mymove4 {
0% {
transform:translate(0,0);
}
20% {
transform:translate(10px,5px);
}
40% {
transform:translate(10px,-5px);
}
60% {
transform:translate(-5px,10px);
}
80% {
transform:translate(-5px,-10px);
}
100% {
transform:translate(0,0);
}
}@-webkit-keyframes mymove4 {
0% {
-webkit-transform:translate(0,0);
}
20% {
-webkit-transform:translate(10px,5px);
}
40% {
-webkit-transform:translate(10px,-5px);
}
60% {
-webkit-transform:translate(-5px,10px);
}
80% {
-webkit-transform:translate(-5px,-10px);
}
100% {
-webkit-transform:translate(0,0);
}
}@-moz-keyframes mymove4 {
0% {
-moz-transform:translate(0,0);
}
20% {
-moz-transform:translate(10px,5px);
}
40% {
-moz-transform:translate(10px,-5px);
}
60% {
-moz-transform:translate(-5px,10px);
}
80% {
-moz-transform:translate(-5px,-10px);
}
100% {
-moz-transform:translate(0,0);
}
}@-o-keyframes mymove4 {
0% {
-o-transform:translate(0,0);
}
20% {
-o-transform:translate(10px,5px);
}
40% {
-o-transform:translate(10px,-5px);
}
60% {
-o-transform:translate(-5px,10px);
}
80% {
-o-transform:translate(-5px,-10px);
}
100% {
-o-transform:translate(0,0);
}
}此效果支持ie10以上的浏览器,ie10、谷歌360极速、火狐版本背景图可以自己找个合适的