侧栏工具栏
2016-05-08 15:46
260 查看
<div class="toolbar"> <a href="javascript:;" class="toolbar-item toolbar-item-weixin"> <span class="toolbar-layer"></span> </a> <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a> <a href="javascript:;" class="toolbar-item toolbar-item-app"> <span class="toolbar-layer"></span> </a> <a href="javascript:;" class="toolbar-item toolbar-item-top"></a> </div>
.toolbar-item,.toolbar-layer{ background-image: url("images/toolbar.png"); background-repeat: no-repeat; } .toolbar{ position: fixed;left: 50%;bottom: 5px;margin-left: -26px; } .toolbar-item{ display: block;width: 52px;;height: 52px; margin-top: 1px;position: relative;transition: background-position 1s; } .toolbar-item:hover .toolbar-layer{opacity: 1;filter: alpha(opacity=100);transform: scale(1)} .toolbar-item-weixin{background-position: 0 -798px} .toolbar-item-weixin:hover{background-position: 0 -860px} .toolbar-item-weixin .toolbar-layer{height: 212px;background-position: 0 0} .toolbar-item-feedback{background-position: 0 -426px} .toolbar-item-feedback:hover{background-position: 0 -488px} .toolbar-item-app{background-position: 0 -550px} .toolbar-item-app:hover{background-position: 0 -612px} .toolbar-item-app .toolbar-layer{height: 194px;background-position:0 -222px} .toolbar-item-top{background-position: 0 -674px} .toolbar-item-top:hover{background-position: 0 -736px} .toolbar-layer{ position: absolute; right: 52px; bottom: -6px; width: 172px; background-image: url("images/toolbar.png"); background-repeat: no-repeat; opacity: 0; filter: alpha(opacity=0); transform-origin: 95% 95%; transform: scale(0.01); transition: all 1s; }
.toolbar-item,.toolbar-layer{ background-image: url("images/toolbar.png"); background-repeat: no-repeat; } .toolbar{ position: fixed;left: 50%;bottom: 5px;margin-left: -26px; } .toolbar-item{ display: block;width: 52px;;height: 52px; margin-top: 1px;position: relative;transition: background-position 1s; } .toolbar-item:hover .toolbar-layer{opacity: 1;filter: alpha(opacity=100);transform: scale(1)} .toolbar-item-weixin{background-position: 0 -798px} .toolbar-item-weixin:hover{background-position: 0 -860px} .toolbar-item-weixin .toolbar-layer{height: 212px;background-position: 0 0} .toolbar-item-feedback{background-position: 0 -426px} .toolbar-item-feedback:hover{background-position: 0 -488px} .toolbar-item-app{background-position: 0 -550px} .toolbar-item-app:hover{background-position: 0 -612px} .toolbar-item-app .toolbar-layer{height: 194px;background-position:0 -222px} .toolbar-item-top{background-position: 0 -674px} .toolbar-item-top:hover{background-position: 0 -736px} .toolbar-layer{ position: absolute; right: 52px; bottom: -6px; width: 172px; background-image: url("images/toolbar.png"); background-repeat: no-repeat; opacity: 0; filter: alpha(opacity=0); transform-origin: 95% 95%; transform: scale(0.01); transition: all 1s; }
设置透明度:opacity: 0; 兼容ie方式filter: alpha(opacity=0);
设置起始点:transform-origin: 95% 95%; 缩放动画:transform: scale(0.01);
相关文章推荐
- 走神了
- Binder 简介
- 浅析中西思维差异对英语口语交际的影响
- linker command failed with exit code 1 (use -v to see invocation)
- MySQL二进制文件规范安装
- Go 语言基础教程:10分钟入门
- Android activity 详解一:activity的生命周期
- 文档注释
- Struts2基础学习(二)—Action
- 打造程序员的高效生产力工具-mac篇
- java Swing布局管理器之CardLayout布局
- Thinkphp单字母函数使用指南
- 3查找最长和的数字串
- 《Java程序设计》第十周学习总结
- 程序员开发辅助工具总结
- ntp配置本地服务器 ntp.conf
- CentOS7安装小小输入法
- 总结
- 《番茄工作法图解》读书笔记
- 集合框架--ArrayList练习实例