我可以获得或控制@KeyFrames CSS动画的颜色吗?

在悬停结束后,我希望文本的颜色更改。文本颜色将是我在文本上徘徊的那一刻我的“游标”的当前颜色。

Cursor示例:

#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 animation?

回答 1

  1. 赞同 1

    You can use 终禁型GROPERTYVALUE.得到这一点Cursor. Color.徘徊(Mouseover.)在EventListener中,然后使用悬停元素背景使用event.target.我使用第二个事件处理程序将悬停颜色设置为默认的BG颜色event.target.请参阅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>


    另一种选择:

    ***你在d上的enventListenerocument.documentelement.然后向每个元素添加特定类,您希望悬停效果触发触发。然后使用条件检查是否存在event.target.classList.contains('.specificClass')以这种方式,只有那个课程的元素将受到影响MouseOver.RULE。

    if (e.target.classList.contains('hoverable')) {
      e.target.style.backgroundColor = cursorColor
    }
    
    // and 
    
    document.documentElement.addEventListener('mouseover', changeBg)
    document.documentElement.addEventListener('mouseout', changeBg)
    

    EDIT:我通过使用类更改了悬停元素的样式。基本上我们正在得到putedStyle.Property.起来event.target.我们仍然使用条件来检查MouseOver / Mouseout.and.Mouseout.Event我们Toggle.根据我们想要它风格的阶级样式的课程。然后是ouseout. we remove the class. This allows you to DD /删除Mulliple使用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>

    Dale Landry
    有一种方法可以改变文本的颜色而不是背景?如果我只是将“style.backgroundcolor”更改为“style.color”,我会很简单。但由于某种原因它仍在改变背景颜色。没有脸
    NEVERMIND LOL我想出来了,谢谢很多!
    代价听到;)Dale Landry