表格悬浮模糊聚焦效果
代码语言:html
所属分类:表格
代码描述:表格悬浮模糊聚焦效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { color: #444; font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif; text-shadow: 0 1px 0 #fff; } strong { font-weight: bold; } em { font-style: italic; } table { background: #f5f5f5; border-collapse: separate; box-shadow: inset 0 1px 0 #fff; font-size: 12px; line-height: 24px; margin: 30px auto; text-align: left; width: 800px; } th { background: linear-gradient(#777, #444); border-left: 1px solid #555; border-right: 1px solid #777; border-top: 1px solid #555; border-bottom: 1px solid #333; box-shadow: inset 0 1px 0 #999; color: #fff; font-weight: bold; padding: 10px 15px; position: relative; text-shadow: 0 1px 0 #000; } th:after { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08)); content: ''; display: block; height: 25%; left: 0; margin: 1px 0 0 0; position: absolute; top: 25%; width: 100%; } th:first-child { border-left: 1px solid #777; box-shadow: inset 1px 1px 0 #999; } th:last-child { box-shadow: inset -1px 1px 0 #999; } td { border-right: 1px solid #fff; border-left: 1px solid #e8e8e8; border-top: 1px solid #fff; border-bottom: 1px solid #e8e8e8; padding: 10px 15px; position: relative; transition: all 300ms; } td:first-child { box-shadow: inset 1px 0 0 #fff; } td:last-child { border-right: 1px solid #e8e8e8; box-shadow: inset -1px 0 0 #fff; } tr { } tr:nth-child(odd) td { background: #f1f1f1; } tr:last-of-type td { box-shadow: inset 0 -1px 0 #fff; } tr:last-of-type td:first-child { box-shadow: inset 1px -1px 0 #fff; } tr:last-of-type td:last-child { box-shadow: inset -1px -1px 0 #fff; } tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa; } tbody:hover tr:hover td { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0