.aside-menu { position:fixed; top:50%; right:20px; margin-top:-200px; z-index:3; } .aside-nav { margin:0; padding:0; list-style:none; color:#ddddf5; position:relative; } .aside-nav__item { position:relative; padding:0 22px 0 0; font-size:11px; line-height:19px; text-transform:uppercase; text-align:right; font-weight:600; } .aside-nav__item:before { content:""; position:absolute; top:50%; right:4px; width:3px; height:3px; background:hsla(0,0%,100%,0.2); border-radius:50%; } .aside-nav__item.active .aside-nav__link { color:#0a9bb0; opacity:1; font-size:14px; } .aside-nav__link { color:#000; opacity:0.5; display:block; padding:20px 0; transition:all 0.2s; } .aside-nav__link:hover { text-decoration:none; color:#fff; opacity:1; } .aside-nav .scroller { position:absolute; height:117px; background:red; right:0; top:-29px; width:13px; transition:all 0.2s; /* background可以设置为一个小图片,效果更好 */ /*background:url(imgUrl) no-repeat; */ background-color:#fff }
更新时间:2020-07-12 10:21:55
直接复制代码就可以使用