css星云动画,jQuery css3星云密布背景动画特效

使用方法：

1、head引入css文件

body {

background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);

background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);

background-attachment: fixed;

overflow: hidden;

}

@keyframes rotate {

0% {

transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);

}

100% {

transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);

}

}

.stars {

transform: perspective(500px);

transform-style: preserve-3d;

position: absolute;

bottom: 0;

perspective-origin: 50% 100%;

left: 50%;

animation: rotate 90s infinite linear;

}

.star {

width: 2px;

height: 2px;

background: #F7F7B6;

position: absolute;

top: 0;

left: 0;

transform-origin: 0 0 -300px;

transform: translate3d(0, 0, -300px);

backface-visibility: hidden;

}

2、head引入js文件

3、body引入HTML代码

$(document).ready(function(){

var stars=800;

var $stars=$(".stars");

var r=800;

for(var i=0;i

var $star=$("

$stars.append($star);

}

$(".star").each(function(){

var cur=$(this);

var s=0.2+(Math.random()*1);

var curR=r+(Math.random()*300);

cur.css({

transformOrigin:"0 0 "+curR+"px",

transform:" translate3d(0,0,-"+curR+"px) rotateY("+(Math.random()*360)+"deg) rotateX("+(Math.random()*-50)+"deg) scale("+s+","+s+")"

})

})

})