Javascript 在两个div之间创建动画图标
我有两个Javascript 在两个div之间创建动画图标,javascript,css,reactjs,Javascript,Css,Reactjs,我有两个div,我想用reactjs/javascript/css在它们之间创建一个动画图标,就像这样(在这个网站上,在字幕和方框之间) 我找到了像react-spring这样的库,但这似乎不是我想要的。 有人能进一步帮助我吗?它使用assets/icons.jsjavascript文件来生成这些图标 使用开发人员工具查看“源”选项卡,以获取网页的所有已用文档 assets/icons.js文件: var icons = ['js', 'json', 'css', 'sass', 'less',
div
,我想用reactjs/javascript/css在它们之间创建一个动画图标,就像这样(在这个网站上,在字幕和方框之间)
我找到了像react-spring
这样的库,但这似乎不是我想要的。
有人能进一步帮助我吗?它使用
assets/icons.js
javascript文件来生成这些图标
使用开发人员工具查看“源”选项卡,以获取网页的所有已用文档
assets/icons.js
文件:
var icons = ['js', 'json', 'css', 'sass', 'less', 'html', 'jpg', 'png', 'gif', 'bmp', 'svg', 'raw', 'rs', 'ts']
var container = document.querySelector('.icons')
function spawn() {
var icon = icons[Math.floor(Math.random() * icons.length)]
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.style.left = 25 + Math.random() * 50 + '%'
svg.setAttribute('class', 'icon')
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'assets/icons.svg#' + icon)
svg.appendChild(use)
container.appendChild(svg)
setTimeout(function() {
container.removeChild(svg)
}, 3000)
}
setTimeout(function run() {
spawn()
setTimeout(run, 500 + Math.random() * 400)
}, 500 + Math.random() * 400)
spawn()
因此,如果您只想复制这个示例,您将使用w3.org的示例来获取这些图标