CSS 陰影動畫鼠標經過

HTML：

<div class="normal">正常模式</div>
<div class="box">優化後</div>

<!--推薦第三種方法-->

<div class="pesudo">雙僞元素</div>

CSS：

<style>
            html,
            body {
                width: 100%;
                height: 100%;
                display: flex;
                background: #bbb;
                overflow: hidden;
            }
            
            div {
                text-align: center;
                width: 100px;
                line-height: 100px;
                position: relative;
                display: inline-block;
                background-color: #fff;
                border-radius: 5px;
                box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
                border-radius: 5px;
                transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
                margin: auto;
                cursor: pointer;
                transform: scale(1.5)
            }
            
            .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;
            }
        </style>