背景星空

最新推荐文章于 2024-10-13 16:31:42 发布

蜗牛后端

最新推荐文章于 2024-10-13 16:31:42 发布

阅读量714

点赞数

分类专栏：代码集

本文链接：https://blog.csdn.net/weixin_39717076/article/details/82012859

版权

代码集专栏收录该内容

51 篇文章 1 订阅

订阅专栏

HTML：

插件链接：https://pan.baidu.com/s/1pmILNinUKoGXb1EC0xOj1Q

提取密码：kamw

<div class="stars">
  		
	</div>

CSS：

body {
	  background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);
	  background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);
	  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;
	}

Javascript：

<script src='js/stopExecutionOnTimeout.js'></script>
$(document).ready(function () {
	    var stars = 800;
	    var $stars = $('.stars');
	    var r = 800;
	    for (var i = 0; i < stars; i++) {
	        if (window.CP.shouldStopExecution(1)) {
	            break;
	        }
	        var $star = $('<div/>').addClass('star');
	        $stars.append($star);
	    }
	    window.CP.exitedLoop(1);
	    $('.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 + ')'
	        });
	    });
	});