我正在尝试将萤火虫动画添加到 react 中的组件中(我尝试使用的代码在这里https://codepen.io/celli/pen/xZgpvN)。如果我有一个简单的 HTML / CSS / Javascript 设置,我会知道该怎么做,但我对如何在 React 的上下文和单个组件的范围内集成这个动画感到困惑。我把下面的代码放在哪里?如何在组件中引用它?
var total=40,
container=document.getElementById('container'),
w=window.innerWidth,
h=window.innerHeight,
Tweens=[],
SPs=1;
for (var i=total;i--;){
var Div=document.createElement('div');
TweenLite.set(Div,{attr:{class:'dot'},x:R(w),y:R(h),opacity:0});
container.appendChild(Div); Anim(Div); Tweens.push(Div);
};
function Anim(elm){
elm.Tween=TweenLite.to(elm,R(20)+10,{bezier:{values:[{x:R(w),y:R(h)},{x:R(w),y:R(h)}]},opacity:R(1),scale:R(1)+0.5,delay:R(2),onComplete:Anim,onCompleteParams:[elm]})
};
for(var i=total;i--;){
Tweens[i].Tween.play()};
function R(max){return Math.random()*max};
其次,我在哪里把 CSS 代码放在下面?
body{
background-color: #222222;
overflow:hidden;
}
.dot{
width:4px;
height:4px;
position:absolute;
background-color:#ff00cc;
box-shadow:0px 0px 10px 2px #ff00cc;
border-radius: 20px;
z-index:2;
}
#container {
width:100%;
height:100%;
}