css - 关于一个前端模块的实现，悬浮选择块
本文介绍了css - 关于一个前端模块的实现，悬浮选择块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
最近要写一个小项目。有一个功能就是在页面的右边有几个方块悬浮，类似于navbar（不过是竖着的）。具备选项卡的功能。效果和感觉可以参考下网址：
http://www.catswhocode.com/bl...
左边的那几个社交网站分享的选项卡。
其实主要是css和html的布局以及样式什么的。有没有谁做过类似的，能给点思路什么的。
本来是写后台的，被拉来做前端，正在飞速学习中。
多谢了～
解决方案
就这样
就是鼠标经过时，左边框从0变成4 自身宽度变窄（视觉上就像翻过去一样）,过程用时0.3秒（transition）
<body>
<div class="wrap">
<ul>
<li><a href="" class="item-1">A</a></li>
<li><a href="" class="item-2">B</a></li>
<li><a href="" class="item-3">C</a></li>
<li><a href="" class="item-4">D</a></li>
</ul>
</div>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
position: fixed;
left: 0;
top: 40%;
text-align: center;
font-weight: 800;
}
.wrap a {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
transition: all 0.3s;
border-left: 0 solid rgba( 0, 0, 0, .4);
}
.wrap a:hover {
border-left: 4px solid rgba( 0, 0, 0, .3);
width: 30px;
}
.item-1 {
background-color: #314a83;
}
.item-2 {
background-color: #00abf0;
}
.item-3 {
background-color: #df4a32;
}
.item-4 {
background-color: #546b9f;
}
</style>
</body>https://jsfiddle.net/cct80n00/
这篇关于css - 关于一个前端模块的实现，悬浮选择块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
