19.マウスホバー光線効果

効果(ソースコードのネットワークディスクアドレスは最後にあります)

パブリックアカウント「MovingtheWorld」に注目して、ビデオチュートリアルをもっと見てください!

ソースコード

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>鼠标悬停射线特效</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<img src='./im1.jpg' alt='cats'>

  
</body>
</html>

css

@property --k {
  syntax: "<number>";
  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

おすすめ

転載: blog.csdn.net/qq449245884/article/details/122749227