当前位置：文江博客话题详情

一段时间后，我想造成图标消失，我希望另一个图标在第二次延迟后占据位置。我使用字体很棒

发布于 2025-01-25 11:08:50 字数 76 浏览 1 评论 0原文

好的，我该如何在一段时间后造成字体失败，而另一个图标则以一秒的延迟将其放置，并且应该在循环中进行此操作，而我使用字体很棒，所以请提供帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

演出会有结束 2025-02-01 11:08:50

你可以做这样的事情

const switchIcon = (container,newHtml, timeout) => {
  
  setTimeout(() => {
    container.innerHTML = ''
    setTimeout(() => {
      container.innerHTML = newHtml
    }, 1000)
  }, timeout)
  
}


switchIcon(document.getElementById('icon-container'), '<span> icon 2</span>', 3000)

<div id="icon-container">
<span>icon 1</span>
</div>

you can do something like this

const switchIcon = (container,newHtml, timeout) => {
  
  setTimeout(() => {
    container.innerHTML = ''
    setTimeout(() => {
      container.innerHTML = newHtml
    }, 1000)
  }, timeout)
  
}


switchIcon(document.getElementById('icon-container'), '<span> icon 2</span>', 3000)

<div id="icon-container">
<span>icon 1</span>
</div>

回复收藏 0 原文

真心难拥有 2025-02-01 11:08:50

除了您的CSS插入内容，

    @keyframes icon1 {
      0%   {opacity: 1; z-index: 1000;} 
   /* Change opacity as you like 1= visible 0=not visible, you can also add other % like 20% 10% to make it happen faster and add any css property*/
      50%  {opacity: 0.5;}
      100% {opacity: 0; z-index: -1;}
    }
    @keyframes icon2 {
      0%   {opacity: 0; z-index: -1;} /* Change opacity as you like 1= visible 0=not visible */
      50%  {opacity: 0.5;}
      100% {opacity: 1; z-index: 1000;}
    }
    /*If you need it clickable just add z-index or insead of z-index add visibility: hidden when opacity is 0 and visibility: visible to opacity 1*/
    
    then add this to your first icon's css
    animation-name: icon1;
    animation-duration: 4s; //change seconds
    animation-iteration-count: infinite;

    
    and this to your second icon's css
    animation-name: icon2;
    animation-duration: 4s; /* Change seconds */
    animation-iteration-count: infinite;

我没有像您那样使其正常工作，但是您可以在它们之间更改价值。
您可以使用绝对位置使它们站在彼此的顶部，请记住，绝对需要顶部或底部：（您想要的任何PX）px;左右或向右：（您想要的任何PX）PX;。还将父母设置为亲戚。

您还可以添加过渡属性以使其变得光滑，始终在图标的CSS示例上

On top of your css insert

    @keyframes icon1 {
      0%   {opacity: 1; z-index: 1000;} 
   /* Change opacity as you like 1= visible 0=not visible, you can also add other % like 20% 10% to make it happen faster and add any css property*/
      50%  {opacity: 0.5;}
      100% {opacity: 0; z-index: -1;}
    }
    @keyframes icon2 {
      0%   {opacity: 0; z-index: -1;} /* Change opacity as you like 1= visible 0=not visible */
      50%  {opacity: 0.5;}
      100% {opacity: 1; z-index: 1000;}
    }
    /*If you need it clickable just add z-index or insead of z-index add visibility: hidden when opacity is 0 and visibility: visible to opacity 1*/
    
    then add this to your first icon's css
    animation-name: icon1;
    animation-duration: 4s; //change seconds
    animation-iteration-count: infinite;

    
    and this to your second icon's css
    animation-name: icon2;
    animation-duration: 4s; /* Change seconds */
    animation-iteration-count: infinite;

I didn't make it work as you would but you can just change value between them.
you can use absolute position to make them stand on top of each other, remember that position absolute needs top or bottom: (any px you want) px; and left or right: (any px you want) px;. Also set parent to relative.

You can also add transition property to make it smooth, always on icon's css example

回复收藏 0 原文

~没有更多了~