首页>>Jquery文字>>纯css右侧固定浮动二维码，联系等(2018-10-12)

纯css右侧固定浮动二维码，联系等

纯css右侧固定浮动二维码，联系等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <!doctype html>  
  2. <html>  
  3. <head>           
  4. <meta charset="utf-8">  
  5. <style>  
  6. * {  
  7.     margin: 0;  
  8.     padding: 0;  
  9.     border: none;  
  10.     zoom: 1;  
  11. }  
  12. ul li {  
  13.     list-style: none;  
  14. }  
  15. .box {  
  16.     width: 52px;  
  17.     height: 162px;  
  18.     border: 1px solid #ccc;  
  19.     position:fixed;  
  20.     top:60%;  
  21.     right:50px;  
  22.     _position:absolute;  
  23.     _bottom:auto;  
  24.     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));  
  25. }  
  26. .box ul li {  
  27.     width: 48px;  
  28.     display: block;  
  29.     height: 50px;  
  30.     padding: 2px;  
  31.     overflow: hidden  
  32. }  
  33. .weixin {  
  34.     background: url(elevator.png) no-repeat;  
  35.     background-position: 0 87%;  
  36.     -webkit-transition: all .3s;  
  37.     -moz-transition: all .3s;  
  38.     -ms-transition: all .3s;  
  39.     -o-transition: all .3s;  
  40. }  
  41. .weixin:hover {  
  42.     background-position: 0 93%  
  43. }  
  44. .weixin:hover .weixin-logo {  
  45.     width: 170px;  
  46.     height: 204px;  
  47. }  
  48. .idea {  
  49.     background: url(elevator.png) no-repeat;  
  50.     background-position: 0 43%;  
  51.     -webkit-transition: all .3s;  
  52.     -moz-transition: all .3s;  
  53.     -ms-transition: all .3s;  
  54.     -o-transition: all .3s;  
  55. }  
  56. .idea:hover {  
  57.     background-position: 0 49%;  
  58. }  
  59. .app {  
  60.     background: url(elevator.png) no-repeat;  
  61.     background-position: 0 55%;  
  62.     -webkit-transition: all .3s;  
  63.     -moz-transition: all .3s;  
  64.     -ms-transition: all .3s;  
  65.     -o-transition: all .3s;  
  66. }  
  67. .app:hover {  
  68.     background-position: 0 61%;  
  69. }  
  70. .app:hover .app-logo {  
  71.     width: 170px;  
  72.     height: 185px;  
  73.     -webkit-transform: rotate(360deg);  
  74.     -moz-transform: rotate(360deg);  
  75.     -ms-transform: rotate(360deg);  
  76.     -o-transform: rotate(360deg);  
  77. }  
  78. .weixin-logo {  
  79.     background: url(elevator.png) no-repeat;  
  80.     background-position: 0 0;  
  81.     width: 0px;  
  82.     height: 0px;  
  83.     overflow: hidden;  
  84.     position: absolute;  
  85.     top: -154px;  
  86.     left: -171px;  
  87.     -webkit-transition: all .3s;  
  88.     -moz-transition: all .3s;  
  89.     -ms-transition: all .3s;  
  90.     -o-transition: all .3s;  
  91. }  
  92. .app-logo {  
  93.     background: url(elevator.png) no-repeat;  
  94.     background-position: 0 26%;  
  95.     width: 0px;  
  96.     height: 0px;  
  97.     overflow: hidden;  
  98.     position: absolute;  
  99.     top: -18px;  
  100.     left: -171px;  
  101.     -webkit-transition: all .3s;  
  102.     -moz-transition: all .3s;  
  103.     -ms-transition: all .3s;  
  104.     -o-transition: all .3s;  
  105. }  
  106. </style>  
  107. <title>纯css右侧固定浮动二维码，联系等</title>  
  108. </head>  
  109.   
  110. <body>  
  111. <div class="box">  
  112.   <ul>  
  113.     <li class="weixin">  
  114.       <div class="weixin-logo"></div>  
  115.     </li>  
  116.     <li class="idea"></li>  
  117.     <li class="app">  
  118.       <div class="app-logo"></div>  
  119.     </li>  
  120.   </ul>  
  121. </div>  
  122. </body>  
  123. </html>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_705.html