如何获得或console.log @keyframes动画的颜色？

Question

我的想法是，我希望文本的颜色在我悬停后改变。文本的颜色将是我的“光标”的当前颜色，当我在文本上徘徊时。

光标示例：

​

#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动画的颜色？

Answer 1

您可以使用getComputedStyle和getPropertyValue获得在eventListener中悬停的游标颜色(mouseover)，然后使用event.target设置悬停元素的背景色。我使用第二个事件处理程序将悬停颜色设置为event.target上的默认bg颜色。例如，参见snippit。

​

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>

​

另一种选择：

*您可以将document.documentElement上的eventListener放置在上，然后向每个要触发悬停效果的元素中添加一个特定的类。然后使用一个条件来检查event.target.classList.contains('.specificClass')，这样，只有具有该类的元素才会受到mouseover规则的影响。

if (e.target.classList.contains('hoverable')) {
  e.target.style.backgroundColor = cursorColor
}

// and 

document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)

编辑:我已经通过使用类更改了悬停元素的样式。基本上，我们使用的是computedStyle和属性。我们仍然使用一个条件来检查mouseover/mouseout，在mouseout事件上，我们切换，这个类按照我们希望的样式来样式我们的悬停元素。然后在鼠标离开时，我们移除类。这允许您使用CSS而不是JS添加/删除多个样式。关键是使用带有变量的: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>

​