css3 实现边栏效果
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.toolbar {
width: 36px;
height: 150px;
position: fixed;
bottom: 15px;
right: 15px;
text-align: center;
}
.toolbar a {
width: 36px;
display: block;
font-size: 12px;
padding: 4px;
font-weight: bold;
color: #EEE;
cursor: pointer;
margin-bottom: 1px;
position: relative;
background-color: #0A908B;
}
.toolbar a .t-layer {
position: absolute;
width: 200px;
height: 200px;
background-color: #00b3e2;
bottom: 0;
right: 39px;
opacity: 0;
filter: opacity(0);
transform: scale(0);
transition: all 1s;
transform-origin: right bottom;
box-shadow: 3px 3px 2px #CCC;
}
.toolbar a:hover .t-layer {
opacity: 1;
filter: opacity(1);
transform: scale(1);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边栏工具条</title>
<link href="dest/asset/all-min.css" rel="stylesheet">
</head>
<body>
<div class="toolbar">
<a><span class="t-layer"></span>微信扫码</a>
<a><span class="t-layer"></span>微博帐号</a>
<a><span class="t-layer"></span>QQ<br>平台</a>
<a><span class="t-layer"></span>网页导航</a>
</div>
</body>
</html> 相关推荐
Burgesszheng 2020-06-16
hqulyc 2020-02-13
chenjinlong 2020-02-13
安辉 2020-02-10
tuxlcsdn 2020-01-02
iflreey 2019-12-14
byn0 2011-08-07
追逐阳光的风 2019-06-13
kiduo0 2016-07-13
mwx 2012-08-21
vickya 2012-08-16
蓝蓝的天 2019-06-29
singlow 2019-06-28
zsh 2017-11-06
zhaoyum 2019-06-27
laxexue 2019-06-26
bertZuo 2019-06-25
SuperMenyII 2019-06-21
zYounggg 2019-06-21