原文地址:https://segmentfault.com/a/1190000014751037
HTML代码:
<div class="books"> <div class="book html"> <span>HTML</span> </div> <div class="book css"> <span>CSS</span> </div> <div class="book js"> <span>JavaScript</span> </div> </div>
CSS代码:
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to top left,white,dimgray); } /* 3本书布局 */ .books{ display: flex; width: calc(12rem * 3 + 3rem * 2); justify-content: space-between; margin-top: 6rem; } .book:nth-child(2){ top: -3rem; } .book:nth-child(3){ top: -6rem; } /* 画出书的正面 */ .book{ position: relative; width: 12rem; height: 18rem; transform: skewY(-10deg); background: linear-gradient(navy, deeppink, tomato); /* 给图书加阴影,让它显得更立体 */ box-shadow: -10px 5px 30px rgba(0,0,0,0.5); transition: 0.3s; } /* 画出书的侧面 */ .book::before{ content: ‘‘; position: absolute; width: 1.5rem; height: 100%; background: linear-gradient(navy, deeppink, tomato); top: 0; left: -1.5rem; transform: skewY(45deg); transform-origin: right; filter: brightness(0.6); } /* 画出书的顶面 */ .book::after{ content: ‘‘; position: absolute; width: 100%; height: 1.5rem; background: white; top: -1.5rem; left: 0; transform-origin: bottom; transform: skewX(45deg); filter: brightness(0.9); } /* 设置文字样式 */ .book span{ position: absolute; font-size: 2.2rem; font-family: sans-serif; width: 100%; height: 8rem; display: block; text-align: center; margin-top: 5rem; padding-top: 2rem; box-sizing: border-box; text-shadow: -2px 2px 10px rgba(0,0,0,0.3); background: silver; } /* 画出文字侧面,与画图书侧面的方法相似 */ .book span::before{ content: ‘‘; position: absolute; width: 1.5rem; height: 100%; background: silver; top: 0; left: -1.5rem; transform-origin: right; transform: skewY(45deg); filter: brightness(0.6); } /* 文字下增加一行小字号文字 */ .book span::after{ display: block; font-size: 1rem; } /* 3本书配色 */ .book.html span, .book.html span::before { background: orange; } .book.css span, .book.css span::before { background: yellowgreen; } .book.js span, .book.js span::before { background: royalblue; } /* 设置 3 本书的小字号文字 */ .book.html span:after { content: ‘<devolopment />‘; } .book.css span::after { content: ‘.devolopment::‘; } .book.js span::after { content: ‘{ devolopment }‘; } /* 为图书增加鼠标划过效果 */ .book:hover { margin-top: -1.5rem; }
原文地址:https://www.cnblogs.com/FlyingLiao/p/10231174.html
时间: 2024-10-31 12:46:26