原生JS实现不断变化的标签

上图为博客右侧截取的GIF图，下图为代码效果

HTML：

 
 


 
  

   
谷歌
   
百度
   
阿里
   
苹果
   
三星
   
耳机
   
音箱
   
电视
   
谷歌
   
百度
   
阿里
  
 

css:

 
  .F-SlideFont-Box * { margin: 0; padding: 0; border: none; list-style: none; }
  .F-SlideFont-Box { width: 300px; height: 300px; border: 1px black solid; position: relative; }
  .F-SlideFont-Box-Tag { width: 90%; height: 90%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
  .F-SlideFont-Tag { position: absolute; display: block; padding: 3px 15px; background-color: #0078F7; border-radius: 10%; color: white; transition:all 1s linear; z-index: 0; transition: all .6s; cursor: pointer; }
 

JS:

  // 这里引入的是我发过的随随机数

此效果主要通过间隔取两数之间的随机数来改变标签的样式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。