当前位置:主页>技术研究院>Flash动漫>正文

10个超级有用的HTML字体排版jQuery插件推荐

2014-12-19 来源:未知 责任编辑:佚名 点击:

分享到:

效果图如下:

 

10个超级有用的HTML字体排版jQuery插件推荐


实现的代码。

html代码:

  1. <div class="container">
  2.         <div class="cube">
  3.             <div class="side side1">
  4.             </div>
  5.             <div class="side side2">
  6.             </div>
  7.             <div class="side side3">
  8.             </div>
  9.             <div class="side side4">
  10.             </div>
  11.             <div class="side side5">
  12.             </div>
  13.             <div class="side side6">
  14.             </div>
  15.         </div>
  16.     </div>
  17.     <div class="container container2">
  18.         <div class="cube">
  19.             <div class="side side1">
  20.             </div>
  21.             <div class="side side2">
  22.             </div>
  23.             <div class="side side3">
  24.             </div>
  25.             <div class="side side4">
  26.             </div>
  27.             <div class="side side5">
  28.             </div>
  29.             <div class="side side6">
  30.             </div>
  31.         </div>
  32.     </div>
复制代码
css3代码:
  1. body{
  2.   height:100vh;
  3. }
  4. .container{
  5.   position:absolute;
  6.   height:100px;
  7.   width:100px;
  8.   left:33%;
  9.   top:50%;
  10.   -webkit-transform: translateX(-50%) translateY(-50%);
  11.           transform: translateX(-50%) translateY(-50%);
  12.   -webkit-perspective:400px;
  13.           perspective:400px;
  14. }
  15. .cube{
  16.   height:100px;
  17.   widht:100px;
  18.   -webkit-transform-origin:50% 50%;
  19.           transform-origin:50% 50%;
  20.   -webkit-transform-style:preserve-3d;
  21.           transform-style:preserve-3d;
  22.   -webkit-animation:rotate 4s infinite ease-in-out;
  23.           animation:rotate 4s infinite ease-in-out;
  24.  
  25. }
  26. .side{
  27.   position:absolute;
  28.   display:block;
  29.   height:100px;
  30.   width:100px;
  31. }
  32. .side1{
  33.   background:#41C3AC;
  34.   -webkit-transform:translateZ(100px);
  35.           transform:translateZ(100px);
  36. }
  37. .side2{
  38.   background:#FF884D;
  39.   -webkit-transform:rotateY(90deg) translateZ(100px);
  40.           transform:rotateY(90deg) translateZ(100px);
  41. }
  42. .side3{
  43.   background:#32526E;
  44.   -webkit-transform:rotateY(180deg) translateZ(100px);
  45.           transform:rotateY(180deg) translateZ(100px);
  46. }
  47. .side4{
  48.   background:#65A2C5;
  49.   -webkit-transform:rotateY(-90deg) translateZ(100px);
  50.           transform:rotateY(-90deg) translateZ(100px);
  51. }
  52. .side5{
  53.   background:#FFCC5C;
  54.   -webkit-transform:rotateX(90deg) translateZ(100px);
  55.           transform:rotateX(90deg) translateZ(100px);
  56. }
  57. .side6{
  58.   background:#FF6B57;
  59.   -webkit-transform:rotateX(-90deg) translateZ(100px);
  60.           transform:rotateX(-90deg) translateZ(100px);
  61. }
  62.  
  63. @-webkit-keyframes rotate{
  64.   0%{
  65.     -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  66.   }
  67.   33.33%{
  68.      -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);    
  69.   }
  70.   66.66%{
  71.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);
  72.   }
  73.   100%{
  74.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);
  75.   }
  76. }
  77. @keyframes rotate{
  78.   0%{
  79.     transform:rotateX(0deg) rotateY(0deg);
  80.   }
  81.   50%{
  82.     transform:rotateX(360deg) rotateY(0deg);    
  83.   }
  84.   100%{
  85.     transform:rotateX(360deg) rotateY(360deg);
  86.   }
  87. }
  88. a{
  89.   font-family:helvetica;
  90.   color:#428bca;
  91.   text-align:center;
  92.   display:block;
  93. }
  94.  
  95. .container2{
  96.   left:66%;
  97. }
  98. .container2 .side{
  99.   border-radius:50%;
  100. }

Copyright © 2007-2014 CDNET.ORG.CN. 成都网络行业协会 版权所有
54_1 54_2 54_3 54_4 54_5 54_6 54_7 54_8 54_9 54_10 54_11 54_12 54_13 54_14 54_15 54_16 54_17 54_18 54_19 54_20 54_21 54_22 54_23 54_24 54_25 54_26 54_27