<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: dodgerblue; font-size: 20px; } ul { width: 900px; margin: 100px auto; list-style: none; position: relative; } li { float: left; width: 180px; height: 80px; cursor: pointer; } li span { float: left; height: 80px; background-color: #ccc; } li .left { width: 30px; transform-origin: left; } li .right { width: 30px; transform-origin: right; } li .center { width: 120px; line-height: 80px; text-align: center; } li:hover .left { transform: skew(0, -30deg); background-color: rgb(154, 148, 148); } li:hover .right { transform: skew(0, 30deg); background-color: rgb(154, 148, 148); } li:hover .center { transform: translateY(-17px); text-shadow: 5px 5px 3px #333; box-shadow: 0 15px 40px -4px #666; } /* ul 前后添加空白区域 */ ul::before, ul::after { content: ""; width: 80px; height: 80px; position: absolute; left: -80px; top: 0; background-color: #ccc; } ul::after { /* 上面设置了left, 现在需要设置右边的时候得释放它的左边依赖，否则右边不会生效 */ left: auto; right: -80px; } </style> </head> <body> <ul> <li> <span class="left"></span> <span class="center">小说阅读器</span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="center">小说阅读器</span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="center">小说阅读器</span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="center">小说阅读器</span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="center">小说阅读器</span> <span class="right"></span> </li> </ul> </body> </html>
- demo 效果：
