File: /www/sites/cbgdh_com/index/wp-content/themes/onenav/assets/fx/io-fx10.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title>io-fx10</title>
<meta name="author" content="iowen.cn">
<style>
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}
</style>
</head>
<body>
<div class="stars"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var stars=800;
var $stars=$(".stars");
var r=800;
for(var i=0;i<stars;i++){
var $star=$("<div/>").addClass("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+")"
})
})
})
</script>
</body>
</html>