*::before,*::after { box-sizing:border-box; } .leaderboard { position:absolute; top:20px; left:10px; width:375px; height:200px; background:#F0F0F0; border-radius:10px; box-shadow:0 7px 30px rgba(62,9,11,0.3); } .leaderboard h1 { font-size:18px; height:30px; line-height:30px; text-align:center; } .leaderboard h1 svg { width:25px; height:26px; position:relative; margin-right:0px; vertical-align:baseline; } .leaderboard ol { counter-reset:leaderboard; } .leaderboard ol li { position:relative; z-index:1; font-size:13px; font-family:微软雅黑; counter-increment:leaderboard; padding:18px 0px 10px 0px; cursor:pointer; } .leaderboard ol li::before { content:counter(leaderboard); position:absolute; z-index:2; top:6px; left:10px; width:15px; height:15px; line-height:15px; color:#4D6999; background:#fff; border-radius:20px; text-align:center; } .leaderboard ol li mark { position:absolute; z-index:2; top:-1px; left:-10px; width:100%; padding:8px 10px 18px 50px; margin:0; background:none; color:#fff; } .leaderboard ol li mark::before,.leaderboard ol li mark::after { content:''; position:absolute; z-index:1; -webkit-transition:all .1s ease-in-out; transition:all .1s ease-in-out; opacity:0; } .leaderboard ol li mark::after { left:auto; right:-9px; border-left:none; border-right:10px solid transparent; } .leaderboard ol li small { position:relative; z-index:2; display:block; text-align:right; } .leaderboard ol li::after { content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:none; box-shadow:0 3px 0 rgba(0,0,0,0.08); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; opacity:0; } .leaderboard ol li { background:#7E98BE; border:1px solid lightgrey; border-width:0px 1px 1px 1px; } .leaderboard ol li::after { background:#637FB0; border-radius:3px; } .leaderboard ol li:hover { z-index:2; overflow:visible; } .leaderboard ol li:hover::after { opacity:1; -webkit-transform:scaleX(1.06) scaleY(1.03); transform:scaleX(1.06) scaleY(1.03); } .leaderboard ol li:hover mark::before,.leaderboard ol li:hover mark::after { opacity:1; -webkit-transition:all .35s ease-in-out; transition:all .35s ease-in-out; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block } body { line-height:1 } ol,ul { list-style:none } blockquote,q { quotes:none } blockquote:before,blockquote:after,q:before,q:after { content:''; content:none } table { border-collapse:collapse; border-spacing:0 } a:link,a:hover,a:visited,a:active { text-decoration:none; color:#fff; }
简易美观的导航栏效果,鼠标放置在菜单上会加深背景色,并显示悬浮效果。