Css 如何将背景图像添加到spark动画横幅？_Css_Css Transitions_Gsap

Css 如何将背景图像添加到spark动画横幅？

css

Css 如何将背景图像添加到spark动画横幅？,css,css-transitions,gsap,Css,Css Transitions,Gsap,我提供了一个使用tween lite的spark动画的代码笔片段。我曾尝试将背景图像添加到代码段中，但没有成功。任何人请帮助添加背景图像 CSS: body { background-color: #13001C; } html, body { height: 100%; overflow: hidden; } .spark { background-color: #DE4A00; font-family: 'Helvetica', sans-serif;

我提供了一个使用tween lite的spark动画的代码笔片段。我曾尝试将背景图像添加到代码段中，但没有成功。任何人请帮助添加背景图像

CSS:

body {
    background-color: #13001C;
}
html, body {
    height: 100%;
    overflow: hidden;
}
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
}

   var density = 70,
    speed = 2,
    winHeight = window.innerHeight,
    winWidth = window.innerWidth,
    start = {
        yMin: winHeight - 50,
        yMax: winHeight,
        xMin: (winWidth / 2) + 10,
        xMax: (winWidth / 2) + 40,
        scaleMin: 0.1,
        scaleMax: 0.25,
        scaleXMin: 0.1,
        scaleXMax: 1,
        scaleYMin: 1,
        scaleYMax: 2,
        opacityMin: 0.1,
        opacityMax: 0.4
    },
    mid = {
        yMin: winHeight * 0.4,
        yMax: winHeight * 0.9,
        xMin: winWidth * 0.1,
        xMax: winWidth * 0.9,
        scaleMin: 0.2,
        scaleMax: 0.8,
        opacityMin: 0.5,
        opacityMax: 1
    },
    end = {
        yMin: -180,
        yMax: -180,
        xMin: -100,
        xMax: winWidth + 180,
        scaleMin: 0.1,
        scaleMax: 1,
        opacityMin: 0.4,
        opacityMax: 0.7
    };

function range(map, prop) {
    var min = map[prop + 'Min'],
        max = map[prop + 'Max'];
    return min + (max - min) * Math.random();
}

function sign() {
    return Math.random() < 0.5 ? -1 : 1;
}

function randomEase(easeThis, easeThat) {
    if (Math.random() < 0.5) {
        return easeThat;
    }
    return easeThis;
}

function spawn(particle) {
    var wholeDuration = (10 / speed) * (0.7 + Math.random() * 0.4),
        delay = wholeDuration * Math.random(),
        partialDuration = (wholeDuration + 1) * (0.2 + Math.random() * 0.3);
    TweenLite.set(particle, {
        y: range(start, 'y'),
        x: range(start, 'x'),
        scaleX: range(start, 'scaleX'),
        scaleY: range(start, 'scaleY'),
        scale: range(start, 'scale'),
        opacity: range(start, 'opacity'),
        visibility: 'hidden'
    });
    // Moving upward
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        y: range(mid, 'y'),
        ease: randomEase(Linear.easeOut, Back.easeInOut)
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        y: range(end, 'y'),
        ease: Back.easeIn
    });
    //Moving on axis X
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        x: range(mid, 'x'),
        ease: Power1.easeOut
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        x: range(end, 'x'),
        ease: Power1.easeIn
    });
    //opacity and scale
    partialDuration = wholeDuration * (0.5 + Math.random() * 0.3);
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        scale: range(mid, 'scale'),
        autoAlpha: range(mid, 'opacity'),
        ease: Linear.easeNone
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        scale: range(end, 'scale'),
        autoAlpha: range(end, 'opacity'),
        ease: Linear.easeNone,
        onComplete: spawn,
        onCompleteParams: [particle]
    });
}
window.onload = createParticle;

function createParticle() {
    var i, particleSpark;
    for (i = 0; i < density; i += 1) {
        particleSpark = document.createElement('div');
        particleSpark.classList.add('spark');
        document.body.appendChild(particleSpark);
        spawn(particleSpark);
    }
}

Javascript:

body {
    background-color: #13001C;
}
html, body {
    height: 100%;
    overflow: hidden;
}
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
}

   var density = 70,
    speed = 2,
    winHeight = window.innerHeight,
    winWidth = window.innerWidth,
    start = {
        yMin: winHeight - 50,
        yMax: winHeight,
        xMin: (winWidth / 2) + 10,
        xMax: (winWidth / 2) + 40,
        scaleMin: 0.1,
        scaleMax: 0.25,
        scaleXMin: 0.1,
        scaleXMax: 1,
        scaleYMin: 1,
        scaleYMax: 2,
        opacityMin: 0.1,
        opacityMax: 0.4
    },
    mid = {
        yMin: winHeight * 0.4,
        yMax: winHeight * 0.9,
        xMin: winWidth * 0.1,
        xMax: winWidth * 0.9,
        scaleMin: 0.2,
        scaleMax: 0.8,
        opacityMin: 0.5,
        opacityMax: 1
    },
    end = {
        yMin: -180,
        yMax: -180,
        xMin: -100,
        xMax: winWidth + 180,
        scaleMin: 0.1,
        scaleMax: 1,
        opacityMin: 0.4,
        opacityMax: 0.7
    };

function range(map, prop) {
    var min = map[prop + 'Min'],
        max = map[prop + 'Max'];
    return min + (max - min) * Math.random();
}

function sign() {
    return Math.random() < 0.5 ? -1 : 1;
}

function randomEase(easeThis, easeThat) {
    if (Math.random() < 0.5) {
        return easeThat;
    }
    return easeThis;
}

function spawn(particle) {
    var wholeDuration = (10 / speed) * (0.7 + Math.random() * 0.4),
        delay = wholeDuration * Math.random(),
        partialDuration = (wholeDuration + 1) * (0.2 + Math.random() * 0.3);
    TweenLite.set(particle, {
        y: range(start, 'y'),
        x: range(start, 'x'),
        scaleX: range(start, 'scaleX'),
        scaleY: range(start, 'scaleY'),
        scale: range(start, 'scale'),
        opacity: range(start, 'opacity'),
        visibility: 'hidden'
    });
    // Moving upward
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        y: range(mid, 'y'),
        ease: randomEase(Linear.easeOut, Back.easeInOut)
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        y: range(end, 'y'),
        ease: Back.easeIn
    });
    //Moving on axis X
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        x: range(mid, 'x'),
        ease: Power1.easeOut
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        x: range(end, 'x'),
        ease: Power1.easeIn
    });
    //opacity and scale
    partialDuration = wholeDuration * (0.5 + Math.random() * 0.3);
    TweenLite.to(particle, partialDuration, {
        delay: delay,
        scale: range(mid, 'scale'),
        autoAlpha: range(mid, 'opacity'),
        ease: Linear.easeNone
    });
    TweenLite.to(particle, wholeDuration - partialDuration, {
        delay: partialDuration + delay,
        scale: range(end, 'scale'),
        autoAlpha: range(end, 'opacity'),
        ease: Linear.easeNone,
        onComplete: spawn,
        onCompleteParams: [particle]
    });
}
window.onload = createParticle;

function createParticle() {
    var i, particleSpark;
    for (i = 0; i < density; i += 1) {
        particleSpark = document.createElement('div');
        particleSpark.classList.add('spark');
        document.body.appendChild(particleSpark);
        spawn(particleSpark);
    }
}

var密度=70，
速度=2，
winHeight=window.innerHeight，
winWidth=window.innerWidth，
开始={
yMin:winHeight-50，
yMax:winHeight，
xMin:（winWidth/2）+10，
xMax：（winWidth/2）+40，
scaleMin:0.1，
标度最大：0.25，
scaleXMin:0.1，
scaleXMax:1，
scaleYMin:1，
规模最大：2，
opacityMin:0.1，
不透明度最大值：0.4
},
中期={
yMin:winHeight*0.4，
yMax:winHeight*0.9，
xMin:winWidth*0.1，
xMax:winWidth*0.9，
scaleMin:0.2，
scaleMax:0.8，
opacityMin:0.5，
不透明度最大值：1
},
结束={
yMin:-180，
yMax:-180，
xMin:-100，
xMax:winWidth+180，
scaleMin:0.1，
scaleMax:1，
opacityMin:0.4，
不透明度最大值：0.7
};
功能范围（地图、道具）{
var min=map[prop+'min']，
最大值=贴图[prop+'max']；
返回min+（max-min）*Math.random（）；
}
函数符号（）{
return Math.random（）<0.5？-1:1；
}
函数randomEase（easeThis，easeThat）{
if（Math.random（）<0.5）{
归还；
}
归还此文件；
}
函数繁殖（粒子）{
变量wholeDuration=（10/速度）*（0.7+数学随机（）*0.4），
delay=wholeDuration*Math.random（），
部分持续时间=（整体持续时间+1）*（0.2+数学随机（）*0.3）；
TweenLite.set（粒子{
y：范围（从“y”开始），
x：范围（从“x”开始），
scaleX:range（从“scaleX”开始），
scaleY:range（从“scaleY”开始），
比例：范围（从“比例”开始），
不透明度：范围（开始“不透明度”），
可见性：“隐藏”
});
//向上移动
TweenLite.至（颗粒、部分固化、{
延迟：延迟，
y：范围（中间“y”），
轻松：随机轻松（Linear.easeOut，Back.easeInOut）
});
TweenLite.to（粒子、整体持续时间-部分持续时间）{
延迟：部分持续+延迟，
y：范围（结束，“y”），
放松：回来，放松
});
//在X轴上移动
TweenLite.至（颗粒、部分固化、{
延迟：延迟，
x：范围（中间，'x'），
ease:Power1.easeOut
});
TweenLite.to（粒子、整体持续时间-部分持续时间）{
延迟：部分持续+延迟，
x：范围（结束，'x'），
ease:Power1.easeIn
});
//不透明度和比例
partialDuration=wholeDuration*（0.5+Math.random（）*0.3）；
TweenLite.至（颗粒、部分固化、{
延迟：延迟，
比例：范围（中间“比例”），
autoAlpha：范围（中间，“不透明度”），
轻松：线性。轻松无
});
TweenLite.to（粒子、整体持续时间-部分持续时间）{
延迟：部分持续+延迟，
比例：范围（结束，“比例”），
autoAlpha:范围（结束，“不透明度”），
ease:Linear.ease无，
完成：产卵，
onCompleteParams:[粒子]
});
}
window.onload=createParticle；
函数createParticle（）{
变量i，particleSpark；
对于（i=0；i<密度；i+=1）{
particleSpark=document.createElement（'div'）；
particleSpark.classList.add（'spark'）；
文件.正文.附件（particleSpark）；
产卵（颗粒公园）；
}
}

代码笔链接：

您可以尝试将背景图像添加到正文中，而不是添加背景颜色：

像这样：

body {
   background-image:url('image/bg.png');
}

你的问题我不清楚。有一个代码笔片段。。。我想将背景图像添加到该片段中。。现在它的背景色是这样的，你想要吗？