粉色星空动态背景html代码

今天发现了一个非常壮观且好看的粉色少女风格的星空动态背景代码，该代码不影响其他布局只修改背景~

代码如下：

演示如下：

使用教程：

将代码粘贴至</body>之前即可

本地化

assets.rnmcnm.com/assets/js/cdn/fensexingkong/script.js

$(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+")"
       
    })
  })
})

assets.rnmcnm.com/assets/css/cdn/fensexingkong/style.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;
}
.table{
	width: 400px;
	height: 350px;
	margin: 80px auto;
}
.table form{
	width: 100%;
}
.table .name{
	width: 280px;
	margin: 20px auto 30px auto;
	display: block;
	height: 30px;
	border-radius: 20px;
	border: none;
	background: rgba(0,0,0,0.2);
	text-indent: 0.5em;
}
.table .btn{
	width: 100px;
	height: 30px;
	background: rgba(0,0,0,0.1);
	border-radius: 8px;
	border: none;
	color: white;
	margin: 0 auto;
	display: block;
}

感谢您的访问，Ctrl+D收藏本站吧。