效果如下
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>