假设三个盒子，三种办法在一起做对比：
<div class="normal">正常模式</div> <div class="box">优化后</div> <div class="pesudo">双伪元素</div>hover的时候最简单的办法就是：
.normal:hover { transform: scale(1.75, 1.75); box-shadow: 0 16px 24px rgba(0, 0, 0, 0.7); }第二种就是：
.box::after { content: ""; border-radius: 5px; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 16px 24px rgba(0, 0, 0, 0.7); opacity: 0; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .box:hover { transform: scale(1.75, 1.75); } .box:hover::after { opacity: 1; }使用双伪元素：
.pesudo { box-shadow: unset; } .pesudo::after { content: ""; border-radius: 5px; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 16px 24px rgba(0, 0, 0, 0.7); opacity: 0; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .pesudo::before { content: ""; border-radius: 5px; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .pesudo:hover { transform: scale(1.75, 1.75); } .pesudo:hover::before { opacity: 0; } .pesudo:hover::after { opacity: 1; }demo地址
