19.鼠标悬停射线特效

效果 (源码网盘地址在最后)

关注公众号《大迁世界》，查看更多视频教程！

源码

index.html

  
  鼠标悬停射线特效
  





  

css

@property --k {
  syntax: "";
  initial-value: 0;
  inherits: false;
}
body {
  display: grid;
  margin: 0;
  height: 100vh;
}

img {
  --k: 0;
  --j: calc(1 - var(--k));
  --list: transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin