Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 css實現仿淘寶右下角客服/微信/微博滾動效果

css實現仿淘寶右下角客服/微信/微博滾動效果

發布時間:2020-05-08   編輯:www.4271936.live
jquery中文網為您提供css實現仿淘寶右下角客服/微信/微博滾動效果等資源,歡迎您收藏本站,我們將為您提供最新的css實現仿淘寶右下角客服/微信/微博滾動效果資源
我們來看一個簡單的css實現仿淘寶右下角客服/微信/微博滾動效果例子,希望此例子能夠為各位同學帶來幫助。

效果如下

css html代碼如下


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
@charset "UTF-8";
@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?-wlgqz9");
  src: url("fonts/icomoon.eot?#iefix-wlgqz9") format("embedded-opentype"), url("fonts/icomoon.ttf?-wlgqz9") format("truetype"), url("fonts/icomoon.woff?-wlgqz9") format("woff"), url("fonts/icomoon.svg?-wlgqz9#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-wechat:before {
  content: "\e600"; }

.icon-envelop:before {
  content: "\e601"; }

.icon-arrow-up2:before {
  content: "\e602"; }

.icon-phone:before {
  content: "\e603"; }

.toolbar {
  position: fixed;
  /*left: 50%;*/
  right: 0;
  bottom: 5px;
  margin-left: -26px; }

.toolbar-item {
  width: 52px;
  height: 52px;
  display: block;
  position: relative;
  margin-top: 1px; }
  .toolbar-item:hover .toolbar-btn:before {
    top: -52px; }
  .toolbar-item:hover .toolbar-btn:after {
    top: 0; }
  .toolbar-item:hover:after {
    opacity: 1;
    filter: alpha(opacity=1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  .toolbar-item:after {
    content: "";
    position: absolute;
    right: 46px;
    width: 172px;
    bottom: -10px;
    background-image: url(../img/toolbar_img.png);
    background-repeat: no-repeat;
    -webkit-transform-origin: 95% 95%;
    -moz-transform-origin: 95% 95%;
    -ms-transform-origin: 95% 95%;
    -o-transform-origin: 95% 95%;
    transform-origin: 95% 95%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.01);
    -moz-transform: scale(0.01);
    -ms-transform: scale(0.01);
    -o-transform: scale(0.01);
    transform: scale(0.01);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s; }

.toolbar-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  overflow: hidden;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .toolbar-btn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    background-color: #d0d6d9;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 52px;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -ms-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s; }
  .toolbar-btn:after {
    content: "";
    position: absolute;
    left: 0;
    top: 52px;
    width: 52px;
    height: 52px;
    background-color: #98a1a6;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding-top: 12px;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -ms-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
    white-space: pre; }

.toolbar-item-weixin:after {
  content: "";
  height: 212px;
  background-position: 0 0; }
.toolbar-item-weixin .toolbar-btn:before {
  content: '\e600'; }
.toolbar-item-weixin .toolbar-btn:after {
  content: '公眾\A賬號'; }

.toolbar-item-feedback .toolbar-btn:before {
  content: '\e600'; }
.toolbar-item-feedback .toolbar-btn:after {
  content: '公眾\A賬號'; }

.toolbar-item-app:after {
  content: "";
  height: 194px;
  background-position: 0 -222px; }
.toolbar-item-app .toolbar-btn:before {
  content: '\e600'; }
.toolbar-item-app .toolbar-btn:after {
  content: '公眾\A賬號'; }

.toolbar-item-top .toolbar-btn:before {
  content: '\e600'; }
.toolbar-item-top .toolbar-btn:after {
  content: '公眾\A賬號'; }

/*# sourceMappingURL=index.css.map */
</style>
 </head>
 <body>
  <!--<div class="toolbar">
   <a href="#" class="toolbar-item toolbar-weixin">
    <span class="toolbar-layer"></span>
   </a>
   <a href="#" class="toolbar-item toolbar-feedback"></a>
   <a href="#" class="toolbar-item toolbar-app">
    <span class="toolbar-layer"></span>
   </a>
   <a href="#" class="toolbar-item toolbar-top"></a>
  </div>
  <script src="js/require.js" data-main="js/main"></script>-->
  <!--<h1>方式二</h1>
  <div class="toolbar">
   <a href="#" class="toolbar-item">
    <span class="toolbar-btn">
     <i class="toolbar-icon icon-wechat"></i>
     <span class="toolbar-text">公眾<br />賬號</span>
    </span>
    <span class="toolbar-layer toolbar-layer-weixin"></span>
   </a>
   <a href="#" class="toolbar-item">
    <span class="toolbar-btn">
     <i class="toolbar-icon icon-envelop"></i>
     <span class="toolbar-text">意見<br />反饋</span>
    </span>
   </a>
   <a href="#" class="toolbar-item">
    <span class="toolbar-btn">
     <i class="toolbar-icon icon-envelop"></i>
     <span class="toolbar-text">APP<br />下載</span>
    </span>
    <span class="toolbar-layer toolbar-layer-app"></span>
   </a>
   <a href="#" class="toolbar-item">
    <span class="toolbar-btn">
     <i class="toolbar-icon icon-arrow-up2"></i>
     <span class="toolbar-text">返回<br />頂部</span>
    </span>
   </a>
  </div>-->
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>

  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <p>111122</p>
  <div class="toolbar">
   <a href="#" class="toolbar-item toolbar-item-weixin">
    <span class="toolbar-btn"></span>
   </a>
   <a href="#" class="toolbar-item toolbar-item-feedback">
    <span class="toolbar-btn"></span>
   </a>
   <a href="#" class="toolbar-item toolbar-item-app">
    <span class="toolbar-btn"></span>
   </a>
   <a href="#" class="toolbar-item toolbar-item-top" id="backtop">
    <span class="toolbar-btn"></span>
   </a>
  </div>
  <script src="js/require.js" data-main="js/main"></script>
 </body>
</html>

您可能感興趣的文章:
仿新浪微博返回頂部的jquery實現代碼
JQUERY 實現窗口滾動搜索框??啃Ч?類似滾動???
jquery滾動組件(vticker.js)實現頁面動態數據的滾動效果
js頁面滾動時層智能浮動定位實現(jQuery/MooTools)
jQuery實現頁面滾動時層智能浮動定位實例探討
jQuery創建平滑的頁面滾動(頂部或底部)
jquery實現圖片左右間隔滾動特效(可自動播放)
jquery實現的一個導航滾動效果具體代碼
jquery插件珍藏(圖片局部放大/信息提示框)
基于jquery的內容循環滾動小模塊(仿新浪微博未登錄首頁滾動微博顯示)

[關閉]
微信下载APP完成任务如何赚钱 配资图片 期货配资 理财投资理财平台投资 哪个网站可以买秒秒彩? pc蛋蛋官方网站 十分快三开奖查询 青海十一选五开奖结果 河南省体彩481彩票网 河南22选5大星彩票网 在线配资服务