Loading... 对方的博客: [神代綺凜の萌化小基地](https://moe.best/) 效果是这样的 ![1.png][1] ![2.png][2] 反正都是 CSS3 渐变和动画，只要功夫深，铁杵磨成针。抄起来没难度（个很）。 html 框架: ```txt article.post.panel // 单个文章 div.post-image // 背景图片的封装 div.img-display // 背景图片 div.post-info // 文章信息 h2.post-title // 标题 span.category // 分类 | a.url // 标题文本 ul // 元信息集合 li*3 > i.fa // 单个元信息 div.post-content ``` 辣鸡 less 代码: ```less // 文章 article.panel { // 小屏幕高度变小 @media (max-width: 767px){ // html font-size 的断点 height: 150px; } height: 240px; // 边框和阴影 border-radius: 5px; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); transition: all 0.2s; // 渐变 color: #fff; //opacity: 0.8; margin-bottom: 30px; position: relative; overflow: hidden; // 出去的内容隐藏 // 悬浮大阴影 &:hover { box-shadow: 0 0 50px #fff; } // 图片 .post-image { z-index: -1; // 背景 transition: all 0.2s; // 撑开 &, .img-display { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } // 居中 覆盖 .img-display { background-position: center center; background-size: cover; } } // 悬浮后: 放大并模糊 &:hover > .post-image { filter: blur(3px); transform: scale(1.05); } // 信息 .post-info { // 撑开 width: 100%; height: 100%; padding: 15px; transition: all 0.2s; //&:hover { background-color: rgba(0, 0, 0, 0.3); // 暗化背景 //} // 标题 .post-title { a { font-size: 1.5rem !important; color: #fff; text-decoration: none; } } // 元信息 .post-meta { list-style: none; padding: 0; li { > i { margin-right: 0.5rem; } display: inline; margin-right: 1rem; } } } } ``` [1]: https://blog.literalkernel.work/usr/uploads/2020/04/3740220302.png [2]: https://blog.literalkernel.work/usr/uploads/2020/04/603868654.png Last modification：June 28th, 2021 at 09:55 pm © 允许规范转载 Support 如果觉得我的文章对你有用，请随意赞赏