炫酷动态彩色魔方中国加油代码分享

china0396

1. <div class="mofang">
   
2.       <div class="cube">
   
3.         <div class="front">
   
4.           <a href="javascript:void(0);" rel="nofollow">中国加油</a>
   
5.         </div>
   
6.         <div class="back">
   
7.           <a href="javascript:void(0);" rel="nofollow">中国加油</a>
   
8.         </div>
   
9.         <div class="right">
   
10.           <a href="javascript:void(0);" rel="nofollow">武汉加油</a>
    
11.         </div>
    
12.         <div class="left">
    
13.           <a href="javascript:void(0);" rel="nofollow">中国加油</a>
    
14.         </div>
    
15.         <div class="top">
    
16.           <a href="javascript:void(0);" rel="nofollow">武汉加油</a>
    
17.         </div>
    
18.         <div class="bottom">
    
19.           <a href="javascript:void(0);" rel="nofollow">中国加油</a>
    
20.         </div>
    
21.       </div>
    
22.     </div>
    
23.     <style>
    
24.     .mofang{width:60px;height:60px;margin:0 auto;position:fixed;z-index:999;-webkit-perspective:1000px;perspective:1000px;right:0;bottom:0;-webkit-transform:translate(-80%,-80%);transform:translate(-80%,-80%)}
    
25.     .cube{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);-webkit-transform-origin:center center -100px;transform-origin:center center -100px;-webkit-animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite;animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite}
    
26.     .cube div{width:80px;height:80px;display:block;margin:0;position:absolute}
    
27.     .cube div a{color:#fff;text-decoration:none;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);line-height:normal;font-size:16px;letter-spacing:3px}
    
28.     .cube .front{-webkit-transform:rotateY(0) translateZ(40px);transform:rotateY(0) translateZ(40px);background-color:rgba(0,191,255,.7);border:2px solid rgba(0,191,255,.7)}
    
29.     .cube .back{-webkit-transform:rotateX(180deg) translateZ(40px);transform:rotateX(180deg) translateZ(40px);background-color:rgba(124,252,0,.7);border:2px solid rgba(124,252,0,.7)}
    
30.     .cube .left{-webkit-transform:rotateY(-90deg) translateZ(40px);transform:rotateY(-90deg) translateZ(40px);background-color:rgba(255,215,0,.7);border:2px solid rgba(255,215,0,.7)}
    
31.     .cube .right{-webkit-transform:rotateY(90deg) translateZ(40px);transform:rotateY(90deg) translateZ(40px);background-color:rgba(255,69,0,.7);border:2px solid rgba(255,69,0,.7)}
    
32.     .cube .top{-webkit-transform:rotateX(90deg) translateZ(40px);transform:rotateX(90deg) translateZ(40px);background-color:rgba(255,0,157,.7);border:2px solid rgba(255,0,157,.7)}
    
33.     .cube .bottom{-webkit-transform:rotateX(-90deg) translateZ(40px);transform:rotateX(-90deg) translateZ(40px);background-color:rgba(184,111,220,.7);border:2px solid rgba(184,111,220,.7)}
    
34.     @-webkit-keyframes around{100%{-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)}
    
35.     }
    
36.     @keyframes around{100%{-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)}
    
37.     }
    
38.     @media only screen and (max-width: 767px) {
    
39.       .mofang{width:40px;height:40px;-webkit-transform: translate(-100%,-100%);transform: translate(-100%,-100%);}
    
40.       .cube div{width:60px;height:60px}
    
41.       .cube div a{font-size:12px;letter-spacing:2px}
    
42.       .cube .front{-webkit-transform:rotateY(0) translateZ(30px);transform:rotateY(0) translateZ(30px);}
    
43.       .cube .back{-webkit-transform:rotateX(180deg) translateZ(30px);transform:rotateX(180deg) translateZ(30px)}
    
44.       .cube .left{-webkit-transform:rotateY(-90deg) translateZ(30px);transform:rotateY(-90deg) translateZ(30px)}
    
45.       .cube .right{-webkit-transform:rotateY(90deg) translateZ(30px);transform:rotateY(90deg) translateZ(30px)}
    
46.       .cube .top{-webkit-transform:rotateX(90deg) translateZ(30px);transform:rotateX(90deg) translateZ(30px)}
    
47.       .cube .bottom{-webkit-transform:rotateX(-90deg) translateZ(30px);transform:rotateX(-90deg) translateZ(30px)}
    
48.     }
    
49.     </style>  

复制代码