CSS3D鼠標特效是指通過CSS3的3D功能,實現與鼠標互動的網頁效果。下面介紹幾種常用的鼠標特效。
/* 鼠標跟隨特效 */ .box { /* 塊狀元素 */ position: relative; width: 200px; height: 200px; background-color: #333; cursor: pointer; } .box .inner { position: absolute; width: 100%; height: 100%; /* 保存初始狀態 */ transform-origin: center; transform: translateZ(35px); /* 開啟GPU加速 */ backface-visibility: hidden; transform-style: preserve-3d; } /* 鼠標滑過特效 */ .box:hover .inner { transition: transform .3s ease-out; transform: translateZ(0); } /* 鼠標點擊翻轉特效 */ .box { /* 塊狀元素 */ position: relative; width: 200px; height: 200px; background-color: #333; cursor: pointer; /* 保存初始狀態 */ transform-origin: center; transform-style: preserve-3d; } .box .inner { position: absolute; width: 100%; height: 100%; /* 初始狀態 */ transform: rotateY(0); backface-visibility: hidden; transform-style: preserve-3d; } /* 點擊翻轉 */ .box.clicked .inner { transition: transform .5s ease-in-out; transform: rotateY(-180deg); } /* 鼠標懸浮中心擴散特效 */ .box { /* 塊狀元素 */ position: relative; width: 200px; height: 200px; background-color: #333; cursor: pointer; /* 保存初始狀態 */ transform-origin: center; transform-style: preserve-3d; } .box .inner { position: absolute; width: 100%; height: 100%; /* 擴散特效 */ transition: transform .3s ease-out; transform: scale(1); /* 保存初始狀態 */ transform-origin: center center; } .box:hover .inner { transform: scale(1.2); }
以上代碼分別實現了鼠標跟隨、鼠標點擊翻轉、鼠標懸浮中心擴散特效。開啟GPU加速可提高運行效率,使用transform-style: preserve-3d可創建3D場景。通過簡單的CSS代碼,實現了豐富的交互效果,增強了用戶體驗。
上一篇css3flexbox
下一篇css3font字號