买了把红轴,虽然价格便宜,但是令我意外的是,红轴比青轴好用多了,而且白色真的是很经典的配色。之前收的那把青轴,没用过多少次就吃灰了。红轴打字很丝滑,声音也不算吵。
今天学习了一个侧边导航栏的效果,说实话,通过模仿别人来学,比自己摸索着学效率高很多,后面可能要适当改变一下学习方法了。
<div class="shell"> <a href="" class="box"><i class="fa-solid fa-thumbs-up"></i> <span>align-left</span></a> <a href="" class="box"><i class="fa-solid fa-thumbs-up"></i> <span>anchor</span></a> <a href="" class="box"><i class="fa-solid fa-thumbs-up"></i> <span>angle</span></a> <a href="" class="box"><i class="fa-solid fa-thumbs-up"></i> <span>aperture</span></a> <a href="" class="box"><i class="fa-solid fa-thumbs-up"></i> <span>apple</span></a> <a href="" class="box"><i class="fa-solid fa-thumbs-up"></i> <span>arrow-spin</span></a> </div>
* { padding: 0; margin: 0; text-decoration: none; } body { background-color: rgb(209, 213, 213); display: flex; justify-content: space-around; height: 100vh; align-items: center; } .shell { width: 100px; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgb(17, 24, 39); border-radius: 5px; transition: 0.3s; overflow: hidden; } .box { display: block; height: 15%; width: 85%; margin: 9px; border-radius: 5px; transition: 0.3s; position: relative; color: rgb(160, 160, 175); } .box i { font-size: 40px; position: absolute; margin: 13px 0 0 21px; } .box:nth-child(1)::before, .box:nth-child(5)::before { content: ""; display: block; width: 100%; height: 2px; position: absolute; bottom: -9px; background-color: #9288aa; } .box span { position: relative; top: 22px; left: 80px; font: 500 20px ''; opacity: 0; transition: 0.1s; } .shell:hover { width: 270px; } .box:hover { background-color: #374151; color: #fff; } .shell:hover span { opacity: 1; }
使用了font awesome的图标,是我的使用流程为
<script>
标签引入一个js文件,就是kits2022/7/29 1:35补充:破案了,不显示是因为用到了一些pro图标,free用户是没有权限访问的,图标详情页面是有标注的
在线编辑新
[https://jsbin.com/xehilokayo/edit?html,output](https://jsbin.com/xehilokayo/edit?html,output