css3 切入动画 |css设置文字旋转60度

.box { 
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: -200px;
width: 200px;
height: 200px;
background-color: #000;
transform: skew(-30deg);
transition: all .5s ease-in-out;
}
.box:hover::before {
left: 0;
}

以上代码是一种简单的CSS3切入动画实现方式。首先，大家需要创建一个具有相对定位和溢出隐藏属性的容器。然后，使用伪元素::before在容器的左侧创建一个具有倾斜效果的黑色矩形，并让其初始位置超出容器。最后，使用transition属性与:hover伪类配合，让伪元素在鼠标悬停时平滑地移动到容器内部，实现切入效果。

CSS3切入动画是一种简单而有效的网页设计手段，可以赋予网页元素更具有趣味性与吸引力的视觉效果，同时也能提升用户体验。