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

前端之家收集整理的这篇文章主要介绍了原生JS实现不断变化的标签前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

HTML:

<Meta charset="UTF-8"> SlideFont
Box">
Box-Tag">
百度
百度

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:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章