console 命令行工具 X clear

console

const div = document.querySelector('div');

[...div.innerText].forEach((item,index)=>{
      if(index==0)
       div.innerText='';

      let span = document.createElement('span');
      span.innerText = item;
      div.appendChild(span);
      span.addEventListener('mouseover',function(){
          this.classList.add('color');
      });
      span.addEventListener('animationend',function(){
          this.classList.remove('color');
      })
})

<html>
    <body>
        <div>
            Doc.Ocean's Wonderful Zone
        </div>
    </body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    width:100%;
    height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #2d3436;
}
div{
    font-size: 3em;
    font-weight: 600;
    color: #fab1a0;
    cursor: default;
}
div>span{
  position:relative;
  margin-left: 4px;
  display:inline-block;
}
.color{
  animation-name: color;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-timing-function:linear;
  animation-direction: alternate;
}

@keyframes color{
    50%{
        color: #0984e3;
        transform: scale(1.5);
    }
    75%{
        color: #6c5ce7;
         transform: scale(2);
    }
    100%{
        color:#dff9fb;
         transform: scale(1);
    }
}