19.鼠标悬停射线特效
Posted @大迁世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了19.鼠标悬停射线特效相关的知识，希望对你有一定的参考价值。
效果 (源码网盘地址在最后)
源码
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以上是关于19.鼠标悬停射线特效的主要内容，如果未能解决你的问题，请参考以下文章