css3D鼠标特效 |css文字中间有横线隔开

/* 鼠标跟随特效 */
.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代码，实现了丰富的交互效果，增强了用户体验。