自定义光标，可反转颜色 [英] Custom Cursor that invert colors
本文介绍了自定义光标，可反转颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个问题. 我该如何制作一个游标，将其后的颜色还原并应用于自身.
I have a question. How can I make a cursor that revert the color behind it and apply to itself.
就像一个负"效应.
但是我需要自动对每种颜色进行编码，以便它可以与自身后面的任何元素进行交互.
But I need that is be automatically without coding each colors, so it can interact with any elements behind itself.
这是我开始使用自定义光标的一个例子，它是我的背景可以作为的一个例子:
Here is my start for the custom cursor and an exemple of what my background can be:
(function () {
var follower, init, mouseX, mouseY, positionElement, printout, timer;
follower = document.getElementById('follower');
printout = document.getElementById('printout');
mouseX = event => {
return event.clientX;
};
mouseY = event => {
return event.clientY;
};
positionElement = event => {
var mouse;
mouse = {
x: mouseX(event),
y: mouseY(event) };
follower.style.top = mouse.y + 'px';
return follower.style.left = mouse.x + 'px';
};
timer = false;
window.onmousemove = init = event => {
var _event;
_event = event;
return timer = setTimeout(() => {
return positionElement(_event);
}, 1);
};
}).call(this);
//# sourceURL=coffeescript
* {
cursor: none;
margin:0;
padding:0;
}
.img{
width:49vw;
height:99vh;
position:absolute;
background: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000');
}
.img2{
width:49vw;
height:99vh;
left:49vw;
position:absolute;
background: url('https://cdn-images-1.medium.com/max/1600/0*I-sI3u34g0ydRqyA');
}
#follower {
position: absolute;
top: 50%;
left: 50%;
}
#follower #circle {
position: absolute;
background: #fff;
border-radius: 50%;
opacity: 0.5;
height: 1.5em;
width: 1.5em;
margin-top: -0.5em;
margin-left: -0.5em;
z-index:2;
}
<div id="follower">
<div id="circle"></div>
</div>
<div class="img"></div>
<div class="img2"></div>
如何给光标带来负面影响?
How can I give the cursor a negative effect?
推荐答案
下面是一个使用背景的想法，其中的技巧是使用radial-gradient模拟光标，因此您可以根据需要在每个元素上定义颜色:
Here is an idea using background where the trick is to simulate the cursor using a radial-gradient so you can define the color on each element like you want:
document.onmousemove = function(e) {
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
* {
cursor: none;
margin:0;
padding:0;
}
.red{
width:33vw;
height:100vh;
position:absolute;
background:
radial-gradient(farthest-side ,white 95%,transparent 100%)
calc(var(--x) - .75em) calc(var(--y) - .75em)/ /*position*/
1.5em 1.5em /*size of circle*/
fixed no-repeat;
background-color:red;
}
.black{
width:33vw;
height:100vh;
margin-left:33vw;
position:absolute;
background:radial-gradient(farthest-side ,cyan 95%,transparent 100%)
calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em fixed no-repeat;
background-color:black;
}
.green{
width:33vw;
height:100vh;
margin-left:66vw;
position:absolute;
background:radial-gradient(farthest-side ,blue 95%,transparent 100%)
calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em fixed no-repeat;
background-color:green;
}
<div class="red"></div>
<div class="black"></div>
<div class="green"></div>
诀窍是每个渐变都是fixed，因此它相对于视口定位，然后我对所有渐变使用相同的CSS变量以将它们放置在同一位置.每个人都只能在其部分中看到.
The trick is that each gradient is made fixed so it is positionned relatively to the viewport then I use the same CSS variable for all the gradient to place them in the same position. Each one will be visible only in its section.
如果您有内容，并且需要将光标放在所有内容上方，则可以考虑使用伪元素在顶部创建图层:
In case you will have content and you need to the cursor above everything, you can consider pseudo element to create the layer on the top:
document.onmousemove = function(e) {
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
* {
cursor: none;
margin:0;
padding:0;
}
.box {
position:relative;
z-index:0;
color:#fff;
}
.box:before {
content:"";
position:absolute;
z-index:999;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side ,var(--c) 95%,transparent 100%)
calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em fixed no-repeat;
}
.red{
width:33vw;
height:100vh;
position:absolute;
background-color:red;
--c:white;
}
.black{
width:33vw;
height:100vh;
margin-left:33vw;
position:absolute;
background-color:black;
--c:cyan;
}
.green{
width:33vw;
height:100vh;
margin-left:66vw;
position:absolute;
background-color:green;
--c:blue;
}
<div class="red box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie sem non dui tempus placerat non ut nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vel nulla commodo, dignissim sem in, viverra ipsum. Nam non libero neque.</div>
<div class="black box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie sem non dui tempus placerat non ut nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vel nulla commodo, dignissim sem in, viverra ipsum. Nam non libero neque.</div>
<div class="green box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie sem non dui tempus placerat non ut nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vel nulla commodo, dignissim sem in, viverra ipsum. Nam non libero neque.</div>
这是另一个想法，您可以使用与三个部分相同的尺寸的linear-gradient来为光标绘制颜色:
Here is another idea where you can color the cursor you made with a linear-gradient having the same dimension as your 3 sections:
(function () {
var follower, init, mouseX, mouseY, positionElement, printout, timer;
follower = document.getElementById('follower');
printout = document.getElementById('printout');
mouseX = event => {
return event.clientX;
};
mouseY = event => {
return event.clientY;
};
positionElement = event => {
var mouse;
mouse = {
x: mouseX(event),
y: mouseY(event) };
follower.style.top = mouse.y + 'px';
return follower.style.left = mouse.x + 'px';
};
timer = false;
window.onmousemove = init = event => {
var _event;
_event = event;
return timer = setTimeout(() => {
return positionElement(_event);
}, 1);
};
}).call(this);
//# sourceURL=coffeescript
* {
cursor: none;
margin:0;
padding:0;
}
.red{
width:33vw;
height:100vh;
position:absolute;
background-color:red;
}
.black{
width:33vw;
height:100vh;
margin-left:33vw;
position:absolute;
background-color:black;
}
.green{
width:33vw;
height:100vh;
margin-left:66vw;
position:absolute;
background-color:green;
}
#follower {
position: absolute;
top: 50%;
left: 50%;
}
#follower #circle {
position: absolute;
background:
linear-gradient(white,white) 0 0,
linear-gradient(cyan,cyan) 33vw 0,
linear-gradient(blue,blue) 66vw 0;
background-size:33vw 100vh;
background-attachment:fixed;
background-repeat:no-repeat;
border-radius: 50%;
opacity: 0.5;
height: 1.5em;
width: 1.5em;
margin-top: -0.5em;
margin-left: -0.5em;
z-index:2;
}
<div id="follower">
<div id="circle"></div>
</div>
<div class="red"></div>
<div class="black"></div>
<div class="green"></div>
上述代码的相关部分:
background:
linear-gradient(white,white) 0 0,
linear-gradient(cyan,cyan) 33vw 0,
linear-gradient(blue,blue) 66vw 0;
background-size:33vw 100vh;
background-attachment:fixed;
background-repeat:no-repeat;
更新
根据您的新要求，您可以考虑 mix-blend-mode 实现您想要的
Based on your new requirements, you can consider mix-blend-mode to achieve what you want
document.onmousemove = function(e) {
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
* {
cursor: none;
margin:0;
padding:0;
}
.box {
position:relative;
z-index:0;
color:#fff;
}
.box:before {
content:"";
position:absolute;
z-index:999;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side ,#fff 95%,transparent 100%)
calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em fixed no-repeat;
mix-blend-mode:difference;
}
.red{
width:33vw;
height:100vh;
position:absolute;
background-color:red;
}
.black{
width:33vw;
height:100vh;
margin-left:33vw;
position:absolute;
background:url(https://picsum.photos/800/600?image=1069) center/cover;
}
.green{
width:33vw;
height:100vh;
margin-left:66vw;
position:absolute;
background:url(https://picsum.photos/800/600?image=1039) center/cover;
}
<div class="red box"></div>
<div class="black box"></div>
<div class="green box"></div>
您只需要(一次)更改光标颜色并定义所需的混合模式.
You simply need to change the cursor color (once) and define the blending mode you want.
这是带有光标元素的
document.onmousemove = function(e) {
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
* {
cursor: none;
margin:0;
padding:0;
}
body:before {
content:"";
position:absolute;
z-index:999;
top:var(--y);
left:var(--x);
right:0;
bottom:0;
width:1.5em;
height:1.5em;
border-radius:50%;
transform:translate(-50%,-50%);
background:#fff;
mix-blend-mode:difference;
}
.red{
width:33vw;
height:100vh;
position:absolute;
background-color:red;
}
.black{
width:33vw;
height:100vh;
margin-left:33vw;
position:absolute;
background:url(https://picsum.photos/800/600?image=1069) center/cover;
}
.green{
width:33vw;
height:100vh;
margin-left:66vw;
position:absolute;
background:url(https://picsum.photos/800/600?image=1039) center/cover;
}
<div class="red box"></div>
<div class="black box"></div>
<div class="green box"></div>
这篇关于自定义光标，可反转颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
