色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3D鼠標特效

劉柏宏2年前9瀏覽0評論

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