css借助伪元素实现边界智能判断移动hover效果

作者:Jasmine - 2020年12月10日

鼠标从哪里进去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>
* {
				margin: 0;
				padding: 0;
			}

			.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: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__right:hover,
			.box__left:hover,
			.box__top:hover,
			.box__bottom:hover,
			.box__center:hover {
			  transform: translateX(0);
			  z-index: 1;
			}
			
			.box__right:hover:before,
			.box__left:hover:before,
			.box__top:hover:before,
			.box__bottom:hover:before,
			.box__center:hover:before {
			  width: 100%;
			  height: 100%;
			  transform: none;
			}
			
			.box__right {
			  background: blue;
			  transform: translateX(100%);
			}
			
			.box__right:before {
			  right: 100%;
			  bottom: 0;
			  transform-origin: 100% 100%;
			}
			
			.box__right:hover ~ .box__center {
			  transform: translateX(-100%);
			}
			
			.box__left {
			  background: green;
			  transform: translateX(-100%);
			}
			
			.box__left:before {
			  left: 100%;
			  transform-origin: 0 0;
			}
			
			.box__left:hover ~ .box__center {
			  transform: translateX(100%);
			}
			
			.box__top {
			  background: red;
			  transform: translateY(-100%);
			}
			
			.box__top:before {
			  top: 100%;
			  right: 0;
			  transform-origin: 100% 0;
			}
			
			.box__top:hover ~ .box__center {
			  transform: translateY(100%);
			}
			
			.box__bottom {
			  background: yellow;
			  transform: translateY(100%);
			}
			
			.box__bottom:before {
			  bottom: 100%;
			  left: 0;
			  transform-origin: 0 100%;
			}
			
			.box__bottom:hover ~ .box__center {
			  transform: translateY(-100%);
			}
			
			.box__center {
			  background: orange;
			  z-index: -1;
			}

效果:

本文作者: Jasmine

本文链接: https://www.jianbaizhan.com/article/714

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!