css伪类实现判断不同方向进入盒子效果

通过设置四个方向的内容盒子以及对应伪类,伪类分别在盒子边上放置底和边长度相等的透明三角形(如矩形选择45deg)
判断方向:当hover三角形的时候,设置对应方向的内容进场
	注意:因为伪类是主元素的一部分,所以hover触发的是主元素的hover,所以给主元素设置hover让后选择伪元素即可
解决同时hover多个三角形方向错乱的问题:当hover其中一个时,让透明三角形变成高宽和盒子等大的透明矩形,且层级最高,随着主内容进场,会一起位移,这样形成遮罩的效果,使得hover其中一个时,不会触发其他hover

代码示例:

<div class="box">
    <div class="box__right">Right → Left</div>
    <div class="box__left">Left → Right</div>
    <div class="box__top">Top → Bottom</div>
    <div class="box__bottom">Bottom → Top</div>
    <div class="box__center">Hover from any side</div> //鼠标未进入时展示的内容
</div>

内容盒子统一设置定位布局

.box {
    margin: 5em auto;
    position: relative;
    width: 10em;
    height: 10em;
    line-height: 10em;
    //overflow: hidden;
}

.box__right,
.box__left,
.box__top,
.box__bottom,
.box__center {
    position: absolute;
    width: inherit;
    height: inherit;
    text-align: center;
    line-height: inherit;
    transition: transform 0.4s ease;
}

//右边内容盒子布局
.box__right {
    background: blue;
    transform: translateX(100%);
}
//右边内容盒子伪元素布局,设置伪元素定位在盒子的左边
.box__right:before {
    right: 100%;
    bottom: 0;
    transform-origin: 100% 100%;  //设置旋转点,便于之后overflow时变成三角形
}

.box__left {
    background: green;
    transform: translateX(-100%);
}

//左边内容盒子伪元素布局,设置伪元素定位在盒子的右边
.box__left:before {
    left: 100%;
    transform-origin: 0 0;	//设置旋转点,便于之后overflow时变成三角形
}	

.box__top {
    background: red;
    transform: translateY(-100%);
}

.box__top:before {
    top: 100%;
    right: 0;
    transform-origin: 100% 0;
}

.box__bottom {
    background: yellow;
    transform: translateY(100%);
}

.box__bottom:before {
    bottom: 100%;
    left: 0;
    transform-origin: 0 100%;
}

设置伪类旋转45deg,在内容展示的盒子的四边内变成透明三角形,演示时让一边有颜色

.box__right:before,
.box__left:before,
.box__top:before,
.box__bottom:before,
.box__center:before {
    position: absolute;
    content: "";
    width: 70.71%;	//让旋转后的三角形,底边和内容的边相同,具体长度可自行设置,只要覆盖就行
    height: 70.71%;
    transform: rotate(45deg);
}

设置box为overflow:hidden,让伪类变成三角形,以及隐藏盒子外的内容

.box {
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  line-height: 10em;
  overflow: hidden;
}

设置主元素hover,因为伪元素是主元素一部分,所以等同于给伪元素也设置了hover

.box__right:hover,
.box__left:hover,
.box__top:hover,
.box__bottom:hover,
.box__center:hover {
    transform: translateX(0);	//设置内容进场
    z-index: 1;					//设置层级为1,最重要的设置,使得当前进入的主元素以及伪类覆盖在其他伪类上,使得鼠标滑动不会触发其他元素的伪类
}

.box__right:hover:before,
.box__left:hover:before,
.box__top:hover:before,
.box__bottom:hover:before,
.box__center:hover:before {
    width: 100%;		//在hover时,伪类大小为整个盒子大小,避免在移动过程中鼠标能hover到其他伪类
    height: 100%;
    transform: none;	//旋转形变取消,恢复为正常矩形
}

.box__center {
    background: orange;
    z-index: -1;			//默认展示内容的盒子层级降低,避免层级高于伪类
}

设置默认内容盒子内容离场效果,若不需要离场,只需要覆盖的效果,则无需设置

.box__right:hover ~ .box__center {
    transform: translateX(-100%);
}


.box__left:hover ~ .box__center {	
    transform: translateX(100%);
}

.box__top:hover ~ .box__center {
    transform: translateY(100%);
}

.box__bottom:hover ~ .box__center {
    transform: translateY(-100%);
}

最终效果: