在鼠标之后滑动叠加

下载代码

html

css

分享到微信朋友圈

html

css

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

div {
  width: 300px;
  height: 200px;
  margin: 20px;
  background: aliceblue;
  overflow: hidden;
  position: relative;
}
div:nth-child(2) {
  background: khaki;
}
div:nth-child(3) {
  background: salmon;
}
div:before {
  content: '+';
  color: white;
  padding-top: calc(30% - 20px);
  padding-left: calc(50% - 20px);
  font-size: 4em;
  position: absolute;
  width: 300px;
  height: 200px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.68, -0.6, 0.33, 1.65);
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
}
div.mouse-from-top:before {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
div.mouse-from-right:before {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
div.mouse-from-bottom:before {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
div.mouse-from-left:before {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
div:hover:before {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  visibility: visible;
}

JavaScript

$(window).on('resize', function(){
  for (i = 0; i < $('div').length; i++) {
    var div = $('div');
    var divW = $(div).width();
    var divH = $(div).height();
  }
  
  $(document).on('mousemove', function(event){
    var mouseX = event.pageX;
    var mouseY = event.pageY;

for (i = 0; i < $('div').length; i++) {
      if (mouseY > 0 && mouseY < $(div[i]).position().top) {
        $(div[i]).removeClass();
        $(div[i]).addClass('mouse-from-top');
      }

if ((mouseY > $(div[i]).position().top && mouseY < $(div[i]).position().top + divH) && (mouseX < $('body').width() && mouseX > $(div[i]).position().left + divW)) {
        $(div[i]).removeClass();
        $(div[i]).addClass('mouse-from-right');
      }

if (mouseY > $(div[i]).position().top + divH && mouseY < $('body').height()) {
        $(div[i]).removeClass();
        $(div[i]).addClass('mouse-from-bottom');
      }

if ((mouseY > $(div[i]).position().top && mouseY < $(div[i]).position().top + divH) && (mouseX > 0 && mouseX < $(div[i]).position().left)) {
        $(div[i]).removeClass();
        $(div[i]).addClass('mouse-from-left');
      }
    }
  });
}).resize();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg