cursory varsity鼠标阴影效果

下载代码

html

css

分享到微信朋友圈

html

css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
 background-color: #F9F9F9;
}
div {
  float: left;
  width: calc(100vw / 11);
  height: calc(100vh / 11);
  margin: calc(100vh / 11) 0 0 calc(100vw / 11);
}
#box1 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box1-offsetLeft) + var(--box1-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box1-offsetTop)  + var(--box1-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box2 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box2-offsetLeft) + var(--box2-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box2-offsetTop)  + var(--box2-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box3 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box3-offsetLeft) + var(--box3-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box3-offsetTop)  + var(--box3-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box4 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box4-offsetLeft) + var(--box4-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box4-offsetTop)  + var(--box4-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box5 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box5-offsetLeft) + var(--box5-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box5-offsetTop)  + var(--box5-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box6 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box6-offsetLeft) + var(--box6-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box6-offsetTop)  + var(--box6-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box7 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box7-offsetLeft) + var(--box7-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box7-offsetTop)  + var(--box7-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box8 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box8-offsetLeft) + var(--box8-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box8-offsetTop)  + var(--box8-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box9 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box9-offsetLeft) + var(--box9-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box9-offsetTop)  + var(--box9-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box10 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box10-offsetLeft) + var(--box10-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box10-offsetTop)  + var(--box10-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box11 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box11-offsetLeft) + var(--box11-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box11-offsetTop)  + var(--box11-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box12 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box12-offsetLeft) + var(--box12-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box12-offsetTop)  + var(--box12-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box13 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box13-offsetLeft) + var(--box13-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box13-offsetTop)  + var(--box13-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box14 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box14-offsetLeft) + var(--box14-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box14-offsetTop)  + var(--box14-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box15 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box15-offsetLeft) + var(--box15-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box15-offsetTop)  + var(--box15-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box16 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box16-offsetLeft) + var(--box16-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box16-offsetTop)  + var(--box16-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box17 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box17-offsetLeft) + var(--box17-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box17-offsetTop)  + var(--box17-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box18 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box18-offsetLeft) + var(--box18-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box18-offsetTop)  + var(--box18-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box19 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box19-offsetLeft) + var(--box19-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box19-offsetTop)  + var(--box19-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box20 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box20-offsetLeft) + var(--box20-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box20-offsetTop)  + var(--box20-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box21 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box21-offsetLeft) + var(--box21-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box21-offsetTop)  + var(--box21-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box22 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box22-offsetLeft) + var(--box22-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box22-offsetTop)  + var(--box22-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box23 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box23-offsetLeft) + var(--box23-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box23-offsetTop)  + var(--box23-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box24 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box24-offsetLeft) + var(--box24-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box24-offsetTop)  + var(--box24-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}
#box25 {
  box-shadow:
    rgba(0,0,0,.3)
    calc( ( var(--box25-offsetLeft) + var(--box25-offsetWidth) / 2 - var(--cursorX) ) / 50 * 1px)
    calc( ( var(--box25-offsetTop)  + var(--box25-offsetHeight) /2 - var(--cursorY) ) / 50 * 1px)
    1vh
  ;
}

JavaScript

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