div+css实现可点击消失书架效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现可点击消失书架效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --shelf-height: 2; --shelf-width: 2; } .booksparent { width: 40vw; border: solid #ba9166 1vh; display: grid; box-shadow: inset 0 0 7vw black; border-radius: 2vw; grid-template-rows: repeat(calc(var(--shelf-height) * var(--shelf-height)), 1fr); background: #855a3b; overflow: hidden; } .shelf { border: solid #ba9166 1.5vh; display: grid; grid-row: span var(--shelf-height); grid-template-rows: subgrid; } .subshelf { border: solid #ba9166 1.5vh; display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(10, 1fr); gap: 0; } .book { width: calc(100% - 2px); margin-top: 2vh; border: solid 1px #111; border-radius: 1vh; align-self: end; } .book::after { content: ""; display: block; width: 2.5vw; height: 0.5vh; margin-left: 0.5vw; margin-top: 3vh; background: #f1f2f3; box-shadow: 0 1vh 0px #ddd; } .book:hover { cursor: pointer; filter: hue-rotate(-15deg); transform: translate(0, -1vh); border-color: #0000aa; box-shadow: 0 1vw 1vw rgba(0,0,0,0.7); } .red { background: #48394f; height: 15vh; } .blue { background: #7f3703; height: 10vh; } .green { height: 17vh; background: #7a7af3; } .help { position: absolute; right: 16px; top: 16px; width: 20vw; padding: 1vw; background: #eee; border: solid 1px #ccc; border-radius: 2vh; font-family: 'Roboto', sans-serif; } .help button { width: 100%; } body { font-family: sans-serif; font-size: 0.9em; } </style> </head> <body > <div class="help"><span>Click on the tallest books to remove them. The shelves respond to accomodate the tallest book remaining in the cabinet, thanks to subgrid.</span> <button>Reset</button> </div> <div class="booksparent"> <div class="shelf"> <div class="subshelf"> <div class="book blue"></div> <div class="book green"></div> <div class="book blue"></div> <div class="book blue"></div> <div class="book green"></div> <div class="book blue"></div> <div class="book blue"></div> <div class="book green"></div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0