分类
<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>
<script src="js/jquery.min.js"></script>
<div class="stars"></div> <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>
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。