css实现仿淘宝右下角客服/微信/微博滚动效果

2016-03-02    编辑:yahoo     点击(
我们来看一个简单的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>