js光线汇聚 css漂流球 信息流汇聚

接锅的一个优化项目，有一张背景图产品经理觉得太丑太呆想要让他动起来。原图如下
观之，确实有点呆板。那怎么动起来呢？除了做gif图就只能是靠强大的css和js了。下面是成品（自制的gif有点渣，关键看效果哈）

css漂流球

transform是css3最具颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、变形skew、缩放scale。知道了这个那么漂流球就好做多了，只需要定义一下球的运动轨迹

@keyframes ball-move {
    0% {transform:translate(0px, 220px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    3.85% {transform:translate(317.682px, 72.513px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    7.69% {transform:translate(588.4044px, 101.5385px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    11.54% {transform:translate(817.5769px, 123.1088px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    15.38% {transform:translate(1010.1772px, 140.6958px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    19.23% {transform:translate(1170.7683px, 155.6555px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    23.08% {transform:translate(1303.5169px, 168.6884px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    26.92% {transform:translate(1412.2114px, 180.2129px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    30.77% {transform:translate(1500.2796px, 190.503px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    34.62% {transform:translate(1570.8071px, 199.7497px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    38.46% {transform:translate(1626.5553px, 208.0919px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    42.31% {transform:translate(1669.9791px, 215.6348px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    46.15% {transform:translate(1703.2452px, 222.4596px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    50% {transform:translate(1728.25px, 228.6307px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    53.85% {transform:translate(1746.6376px, 234.1997px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    57.69% {transform:translate(1759.818px, 239.2088px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    61.54% {transform:translate(1768.9849px, 243.6923px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    65.38% {transform:translate(1775.1337px, 247.6789px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    69.23% {transform:translate(1779.0799px, 251.1923px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    73.08% {transform:translate(1781.4764px, 254.252px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    76.92% {transform:translate(1782.8324px, 256.8742px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    80.77% {transform:translate(1783.5308px, 259.0724px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    84.62% {transform:translate(1783.8462px, 260.857px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    88.46% {transform:translate(1783.9635px, 262.2367px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    92.31% {transform:translate(1783.9952px, 263.2178px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    96.15% {transform:translate(1783.9998px, 263.8047px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
    100% {transform:translate(1784px, 264px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

然后在对应球型div添加animation-name名称就可以动起来了。但是，此时光动起来也不好看，因为没有颜色分层和闪烁效果。我的解决办法是通过div叠加然后给不同的背景色实现的颜色分层

<div class="out">
    <div class="middle">
        <div  class="inside"></div>
    </div>
</div>

注意颜色分层后需要用高斯模糊的属性来配置一下，最后再配以改变球体透明度来实现闪烁效果

@keyframes flicker{
    25% {
        left: 10%;
        opacity:0.3;
    }
    50% {
        left: 10%;
        opacity:0.7;
    }
    75% {
        left: 50%;
        opacity:1;
    }
    85% {
        left: 50%;
        opacity:0;
    }
    90% {
        left: 50%;
        opacity:1;
    }
    95% {
        left: 50%;
        opacity:0.5;
    }
    100% {
        left: 100%;
        opacity:1;
    }
}

js光线汇聚

光线汇聚的效果也很好做，上次写过一个用canvas做的光线，在这个优化中使用js会更加灵活一点。所以用的js配合transform就可以了，代码如下

function createLine(num,color,width,height,speed,left,top,deg){
		//射线数（px），颜色，宽度，高度，速度，位置左，位置右，角度
		var $sparkLine=$('<div class="line_box"></div>');
		$sparkLine.css("top",top);
		$sparkLine.css("left",left);
		$sparkLine.css("height",height);
		$sparkLine.css("transform",' rotateZ('+deg+'deg)');
		for(var i=0;i<num;i++){
			var $sparkParticle=$('<div class="line_item"></div>');
			$sparkParticle.css("-webkit-animation","fade "+speed+"s "+i/10+"s infinite");
			$sparkParticle.css("width",width);
			$sparkParticle.css("height",height);
            $sparkParticle.css("background",color);
			$sparkLine.append($sparkParticle)
		}
		$(".line_container").append($sparkLine)
	}
	createLine(45,'#0053ca',30,2,1,600,0,13.5)

做完这些剩下的就是设置每个球的运动轨迹还有调节生成的光线的角度数量等问题。