-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss.html
64 lines (63 loc) · 1.85 KB
/
css.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
</head>
<body>
<div id="ball"></div>
</body>
<script>
window.onload = () => {
document.documentElement.style.setProperty('--screen-x', window.innerWidth);
document.documentElement.style.setProperty('--screen-y', window.innerHeight);
document.addEventListener('mousemove', e => {
document.documentElement.style.setProperty('--mouse-x', e.x);
document.documentElement.style.setProperty('--mouse-y', e.y);
}, {passive: true});
};
window.onresize = () => {
document.documentElement.style.setProperty('--screen-x', window.innerWidth);
document.documentElement.style.setProperty('--screen-y', window.innerHeight);
};
</script>
<style>
:root {
--screen-x: 0; --screen-y: 0;
--mouse-x: 0; --mouse-y: 0;
--stop: 10%;
}
html,body {
height:100%;
margin: 10;
padding: 10;
}
#ball {
width: 20px;
height: 20px;
background: rgb(
calc(255 - (255 / 100 * var(--mouse-y) / var(--screen-y) * 100)),
calc(255 / 100 * var(--mouse-x) / var(--screen-x) * 100),
calc((255 / 100 * var(--mouse-y) / var(--screen-y) * 100)));
transform: translate(
calc(calc(var(--mouse-x) - 10) * 1px),
calc(calc(var(--mouse-y) - 10) * 1px)
);
border-radius: 100%;
}
body {
background: radial-gradient(
circle at calc(var(--mouse-x) * 1px) calc(var(--mouse-y) * 1px),
rgb(
calc(255 / 100 * var(--mouse-x) / var(--screen-x) * 100),
calc(255 / 100 * var(--mouse-y) / var(--screen-y) * 100),
calc(255 / 100 * var(--mouse-x) / var(--screen-x) * 100)) 0,
rgb(
calc(255 / 100 * var(--mouse-y) / var(--screen-x) * 100),
calc(255 / 100 * var(--mouse-x) / var(--screen-y) * 100),
calc(255 / 100 * var(--mouse-x) / var(--screen-y) * 100)) var(--stop),
#000);
}
</style>
</html>