如何获取或 console.log @keyframes css 动画的颜色？
How can I get or console.log the color of a @keyframes css animation?
我的想法是，我希望在鼠标悬停后更改文本的颜色。当我将鼠标悬停在文本上时，文本颜色将是我的“光标”的当前颜色。
光标示例：
#cursor{
position: absolute;
top: 4.6%;
left: 6.5%;
width: 30px;
height: 30px;
background: #000000 ;
border:none;
box-sizing: border-box;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
transition: 0.2s;
z-index: -1;
}
#cursor {
animation: color-change 10s infinite;
}
@keyframes color-change {
0% { background: rgb(0, 0, 0); }
10% { background: red; }
20% { background: rgb(255, 81, 0); }
30% { background: rgb(255, 238, 0); }
40% { background: rgb(136, 255, 0); }
50% { background: rgb(0, 255, 21); }
60% { background: rgb(0, 255, 179); }
70% { background: rgb(0, 119, 255); }
80% { background: rgb(76, 0, 255); }
90% { background: rgb(255, 0, 170); }
100% { background: rgb(255, 0, 85); }
}
<div id="cursor"></div>
<script type="text/javascript">
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove' , function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
});
</script>
如何获得 @keyframes CSS 动画的颜色？
您可以使用 getComputedStyle 和 getPropertyValue 来获取 cursor color 在eventListener中悬停（mouseover），然后设置悬停元素背景-颜色使用 event.target。我使用第二个事件处理程序将悬停颜色设置回 event.target 上的默认 bg 颜色。例如，请参见代码片段。
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
});
const target = document.getElementById("targetEl")
function changeBg(e) {
// check type of event
if (e.type === 'mouseover') {
// get computed style of cursor on mouseover
let compStyle = getComputedStyle(document.getElementById('cursor'))
// get computed property background-color
let cursorColor = compStyle.getPropertyValue('background-color')
// set e.target to background-color of
e.target.style.backgroundColor = cursorColor
}
// reset background of text back to default on mouseout
if (e.type === 'mouseout') {
// get computed style of root HTML which holds
// the CSS variable that the elements bg is set to
let targetBg = getComputedStyle(document.documentElement)
// get property
let targetBgColor = targetBg.getPropertyValue('--default-bg');
// set target back to default bg color
e.target.style.backgroundColor = targetBgColor
}
}
document.body.addEventListener('mouseover', changeBg)
target.addEventListener('mouseout', changeBg)
:root {
--default-bg: transparent;
}
#cursor {
position: absolute;
top: 4.6%;
left: 6.5%;
width: 30px;
height: 30px;
background: #000000;
border: none;
box-sizing: border-box;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
transition: 0.2s;
z-index: -1;
}
#cursor {
animation: color-change 10s infinite;
}
@keyframes color-change {
0% {
background: rgb(0, 0, 0);
}
10% {
background: red;
}
20% {
background: rgb(255, 81, 0);
}
30% {
background: rgb(255, 238, 0);
}
40% {
background: rgb(136, 255, 0);
}
50% {
background: rgb(0, 255, 21);
}
60% {
background: rgb(0, 255, 179);
}
70% {
background: rgb(0, 119, 255);
}
80% {
background: rgb(76, 0, 255);
}
90% {
background: rgb(255, 0, 170);
}
100% {
background: rgb(255, 0, 85);
}
}
#targetEl {
background-color: var(--default-bg);
}
<div id="cursor"></div>
<div id="targetEl">Hover over this text</div>
另一个选项：
*** 您可以 将 eventListener 放在 document.documentElement，然后将特定的 class 添加到您希望触发悬停效果的每个元素。然后使用条件检查是否 event.target.classList.contains('.specificClass')，这样只有具有 class 的元素才会受到 mouseover[=67= 的影响]规则。
if (e.target.classList.contains('hoverable')) {
e.target.style.backgroundColor = cursorColor
}
// and
document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)
编辑：我使用 class 更改了悬停元素的样式。基本上我们使用 event.target 获得 computedStyle 和 属性。我们仍然使用条件来检查 mouseover/mouseout 并且在 mouseout 事件上我们 toggle class 按照我们想要的样式设置可悬停元素的样式。然后在 mouseout 我们删除 class。这允许您使用 CSS 而不是 JS 来 add/remove 多种样式。关键是使用 :root -> document.documentElement 和变量，我们通过设置 CSS 变量将元素的颜色初始设置为其默认颜色。然后我们使用 JS 更改 CSS 变量，然后在我们的 CSS 中它会自动更改，因为我们引用该变量来设置悬停元素的样式。
if (e.target.classList.contains('hoverable')) {
e.target.style.backgroundColor = cursorColor
}
// and
document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
});
const target = document.getElementById("targetEl")
function changeBg(e) {
if (e.target.classList.contains('hoverable')) {
// check type of event
if (e.type === 'mouseover') {
// get computed style of cursor on mouseover
let compStyle = getComputedStyle(document.getElementById('cursor'))
// get computed property background-color
let cursorColor = compStyle.getPropertyValue('background-color')
// we use a root css variable to handle the property
// change by setting the root variable to the bg color
document.documentElement.style.setProperty('--default-color', cursorColor)
// add the class that handles the styling on hover
e.target.classList.add('hovered')
}
// reset background of text back to default on mouseout
if (e.type === 'mouseout') {
// remove the styled class from our element in the DOM
e.target.classList.remove('hovered')
}
}
}
document.body.addEventListener('mouseover', changeBg)
document.body.addEventListener('mouseout', changeBg)
:root {
--default-bg: transparent;
--default-color: black;
}
#cursor {
position: absolute;
top: 4.6%;
left: 6.5%;
width: 30px;
height: 30px;
background: #000000;
border: none;
box-sizing: border-box;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
transition: 0.2s;
z-index: -1;
animation: color-change 10s infinite;
}
@keyframes color-change {
0% {
background: rgb(0, 0, 0);
}
10% {
background: red;
}
20% {
background: rgb(255, 81, 0);
}
30% {
background: rgb(255, 238, 0);
}
40% {
background: rgb(136, 255, 0);
}
50% {
background: rgb(0, 255, 21);
}
60% {
background: rgb(0, 255, 179);
}
70% {
background: rgb(0, 119, 255);
}
80% {
background: rgb(76, 0, 255);
}
90% {
background: rgb(255, 0, 170);
}
100% {
background: rgb(255, 0, 85);
}
}
body > * {
transition: color .5s;
}
.hovered {
color: var(--default-color);
}
#targetEl {
background-color: var(--default-bg);
transition: color .5s;
}
<div id="cursor"></div>
<div id="targetEl" class="hoverable">Hover over this text</div>
<div>This element will not change as it does not contain the <i>hoverable</i> class</div>
<h2 class="hoverable">This h2 tag contains the class hoverable!</h2>
我的想法是，我希望在鼠标悬停后更改文本的颜色。当我将鼠标悬停在文本上时，文本颜色将是我的“光标”的当前颜色。
光标示例：
#cursor{
position: absolute;
top: 4.6%;
left: 6.5%;
width: 30px;
height: 30px;
background: #000000 ;
border:none;
box-sizing: border-box;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
transition: 0.2s;
z-index: -1;
}
#cursor {
animation: color-change 10s infinite;
}
@keyframes color-change {
0% { background: rgb(0, 0, 0); }
10% { background: red; }
20% { background: rgb(255, 81, 0); }
30% { background: rgb(255, 238, 0); }
40% { background: rgb(136, 255, 0); }
50% { background: rgb(0, 255, 21); }
60% { background: rgb(0, 255, 179); }
70% { background: rgb(0, 119, 255); }
80% { background: rgb(76, 0, 255); }
90% { background: rgb(255, 0, 170); }
100% { background: rgb(255, 0, 85); }
}
<div id="cursor"></div>
<script type="text/javascript">
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove' , function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
});
</script>
如何获得 @keyframes CSS 动画的颜色？
您可以使用 getComputedStyle 和 getPropertyValue 来获取 cursor color 在eventListener中悬停（mouseover），然后设置悬停元素背景-颜色使用 event.target。我使用第二个事件处理程序将悬停颜色设置回 event.target 上的默认 bg 颜色。例如，请参见代码片段。
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
});
const target = document.getElementById("targetEl")
function changeBg(e) {
// check type of event
if (e.type === 'mouseover') {
// get computed style of cursor on mouseover
let compStyle = getComputedStyle(document.getElementById('cursor'))
// get computed property background-color
let cursorColor = compStyle.getPropertyValue('background-color')
// set e.target to background-color of
e.target.style.backgroundColor = cursorColor
}
// reset background of text back to default on mouseout
if (e.type === 'mouseout') {
// get computed style of root HTML which holds
// the CSS variable that the elements bg is set to
let targetBg = getComputedStyle(document.documentElement)
// get property
let targetBgColor = targetBg.getPropertyValue('--default-bg');
// set target back to default bg color
e.target.style.backgroundColor = targetBgColor
}
}
document.body.addEventListener('mouseover', changeBg)
target.addEventListener('mouseout', changeBg)
:root {
--default-bg: transparent;
}
#cursor {
position: absolute;
top: 4.6%;
left: 6.5%;
width: 30px;
height: 30px;
background: #000000;
border: none;
box-sizing: border-box;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
transition: 0.2s;
z-index: -1;
}
#cursor {
animation: color-change 10s infinite;
}
@keyframes color-change {
0% {
background: rgb(0, 0, 0);
}
10% {
background: red;
}
20% {
background: rgb(255, 81, 0);
}
30% {
background: rgb(255, 238, 0);
}
40% {
background: rgb(136, 255, 0);
}
50% {
background: rgb(0, 255, 21);
}
60% {
background: rgb(0, 255, 179);
}
70% {
background: rgb(0, 119, 255);
}
80% {
background: rgb(76, 0, 255);
}
90% {
background: rgb(255, 0, 170);
}
100% {
background: rgb(255, 0, 85);
}
}
#targetEl {
background-color: var(--default-bg);
}
<div id="cursor"></div>
<div id="targetEl">Hover over this text</div>
另一个选项：
*** 您可以 将 eventListener 放在 document.documentElement，然后将特定的 class 添加到您希望触发悬停效果的每个元素。然后使用条件检查是否 event.target.classList.contains('.specificClass')，这样只有具有 class 的元素才会受到 mouseover[=67= 的影响]规则。
if (e.target.classList.contains('hoverable')) {
e.target.style.backgroundColor = cursorColor
}
// and
document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)
编辑：我使用 class 更改了悬停元素的样式。基本上我们使用 event.target 获得 computedStyle 和 属性。我们仍然使用条件来检查 mouseover/mouseout 并且在 mouseout 事件上我们 toggle class 按照我们想要的样式设置可悬停元素的样式。然后在 mouseout 我们删除 class。这允许您使用 CSS 而不是 JS 来 add/remove 多种样式。关键是使用 :root -> document.documentElement 和变量，我们通过设置 CSS 变量将元素的颜色初始设置为其默认颜色。然后我们使用 JS 更改 CSS 变量，然后在我们的 CSS 中它会自动更改，因为我们引用该变量来设置悬停元素的样式。
if (e.target.classList.contains('hoverable')) {
e.target.style.backgroundColor = cursorColor
}
// and
document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
});
const target = document.getElementById("targetEl")
function changeBg(e) {
if (e.target.classList.contains('hoverable')) {
// check type of event
if (e.type === 'mouseover') {
// get computed style of cursor on mouseover
let compStyle = getComputedStyle(document.getElementById('cursor'))
// get computed property background-color
let cursorColor = compStyle.getPropertyValue('background-color')
// we use a root css variable to handle the property
// change by setting the root variable to the bg color
document.documentElement.style.setProperty('--default-color', cursorColor)
// add the class that handles the styling on hover
e.target.classList.add('hovered')
}
// reset background of text back to default on mouseout
if (e.type === 'mouseout') {
// remove the styled class from our element in the DOM
e.target.classList.remove('hovered')
}
}
}
document.body.addEventListener('mouseover', changeBg)
document.body.addEventListener('mouseout', changeBg)
:root {
--default-bg: transparent;
--default-color: black;
}
#cursor {
position: absolute;
top: 4.6%;
left: 6.5%;
width: 30px;
height: 30px;
background: #000000;
border: none;
box-sizing: border-box;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
transition: 0.2s;
z-index: -1;
animation: color-change 10s infinite;
}
@keyframes color-change {
0% {
background: rgb(0, 0, 0);
}
10% {
background: red;
}
20% {
background: rgb(255, 81, 0);
}
30% {
background: rgb(255, 238, 0);
}
40% {
background: rgb(136, 255, 0);
}
50% {
background: rgb(0, 255, 21);
}
60% {
background: rgb(0, 255, 179);
}
70% {
background: rgb(0, 119, 255);
}
80% {
background: rgb(76, 0, 255);
}
90% {
background: rgb(255, 0, 170);
}
100% {
background: rgb(255, 0, 85);
}
}
body > * {
transition: color .5s;
}
.hovered {
color: var(--default-color);
}
#targetEl {
background-color: var(--default-bg);
transition: color .5s;
}
<div id="cursor"></div>
<div id="targetEl" class="hoverable">Hover over this text</div>
<div>This element will not change as it does not contain the <i>hoverable</i> class</div>
<h2 class="hoverable">This h2 tag contains the class hoverable!</h2>