css实现炫酷三维阴影排行列表效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现炫酷三维阴影排行列表效果代码,鼠标悬浮有立体效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> *,*::before,*::after { box-sizing:border-box } body { min-height:450px; height:100vh; margin:0; background:radial-gradient(ellipse farthest-corner at center top,#f39264 0,#f2606f 100%); color:#fff; font-family:"Open Sans",sans-serif } .leaderboard { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:285px; height:308px; background:linear-gradient(to bottom,#3a404d,#181c26); border-radius:10px; box-shadow:0 7px 30px rgba(62,9,11,0.3) } .leaderboard h1 { font-size:18px; color:#e1e1e1; padding:12px 13px 18px } .leaderboard h1 svg { width:25px; height:26px; position:relative; top:3px; margin-right:6px; vertical-align:baseline } .leaderboard ol { counter-reset:leaderboard } .leaderboard ol li { position:relative; z-index:1; font-size:14px; counter-increment:leaderboard; padding:18px 10px 18px 50px; cursor:pointer; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0) scale(1,1) } .leaderboard ol li::before { content:counter(leaderboard); position:absolute; z-index:2; top:15px; left:15px; width:20px; height:20px; line-height:20px; color:#c24448; background:#fff; border-radius:20px; text-align:center } .leaderboard ol li mark { position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; padding:18px 10px 18px 50px; margin:0; background:0; color:#fff } .leaderboard ol li mark::before,.leaderboard ol li mark::after { content:""; position:absolute; z-index:1; bottom:-11px; left:-9px; border-top:10px solid #c24448; border-left:10px solid transparent; 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:#fa6855; box-shadow:0 3px 0 rgba(0,0,0,0.08); transition:all .3s ease-in-out; opacity:0 } .leaderboard ol li:nth-child(1) { background:#fa6855 } .leaderboard ol li:nth-child(1)::after { background:#fa6855 } .leaderboard ol li:nth-child(2) { background:#e0574f } .leaderboard ol li:nth-child(2)::after { background:#e0574f; box-shadow:0 2px 0 rgba(0,0,0,0.08) } .leaderboard ol li:nth-child(2) mark::before,.leaderboard ol li:nth-child(2) mark::after { border-top:6px solid #ba4741; bottom:-7px } .leaderboard ol li:nth-child(3) { background:#d7514d } .leaderboard ol li:nth-child(3)::after { background:#d7514d; box-shadow:0 1px 0 rgba(0,0,0,0.11) } .leaderboard ol li:nth-child(3) mark::before,.leaderboard ol li:nth-child(3) mark::after { border-top:2px solid #b0433f; bottom:-3px } .leaderboard ol li:nth-child(4) { background:#cd4b4b } .leaderboard ol li:nth-child(4)::after { background:#cd4b4b; box-shadow:0 -1px 0 rgba(0,0,0,0.15) } .leaderboard ol li:nth-child(4) mark::before,.leaderboard ol li:nth-child(4) mark::after { top:-7px; bottom:auto; border-top:0; border-bottom:6px solid #a63d3d } .leaderboard ol li:nth-child(5) { background:#c24448; border-radius:0 0 10px 10px } .leaderboard ol li:nth-child(5)::after { background:#c24448; box-shadow:0 -2.5px 0 rgba(0,0,0,0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0