css3 实现边栏效果 csshtml
程序员文章站
2022-06-08 13:26:22
...
* {
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>
下一篇： java 抠图实现图片签名