桔子雨工作室
注意再同目录下放一张logo.png图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>桔子雨工作室</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<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(300px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(300px) 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: 100%;
max-width:400px;
margin: 180px auto;
text-align:center;
}
.table form{
width: 100%;
}
.table .name{
width: 100%;
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;
}
</style>
</head>
<body>
<div class="stars"></div> <!--背景层，不要删除，不然没有作用-->
<div class="table">
<img src="logo.png">
<h2 style="color: white;">桔子雨官网即将上线！</h2>
</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>
</body>
</html> 