淘寶作為中國最大的電商平臺,為了提高用戶的購物體驗,它采用了大量的css遮罩效果。下面我們來詳細了解一下這些遮罩效果的實現。
// 遮罩層 .mask{ position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9999; } // 模態框父容器 .pop{ position: fixed; display: none; width: 80%; max-width: 600px; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10000; } // 模態框內容 .pop .content{ background: #fff; padding: 20px; border-radius: 10px; } // 關閉按鈕 .pop .close{ position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; }
以上就是淘寶css遮罩效果的實現代碼,其中mask是遮罩層的樣式,pop是模態框的樣式,包括模態框的容器和內容,以及關閉按鈕。
淘寶的這些遮罩效果能夠很好地保護用戶的隱私,防止惡意攻擊,同時也為用戶提供了良好的購物體驗。
上一篇淘寶css換導航欄
下一篇淘寶css簡易模板教程