星空样式写法
- 引入jquery库
- css样式代码
- js部分
一：引入jquery库
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
二:css样式代码
body {
/* 径向渐变 第一个参数是位置 */
/* 这里用了background-attachment 在渐变色产生了效果*/
/* overflow: hidden;溢出隐藏元素 */
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;
}
/* perspective从哪个角度去看 */
/* @keyframes roate 动画旋转 */
@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;
三：js部分
$(document).ready(function() {
var stars = 2000; /*星星的密集程度，数字越大越多*/
var $stars = $(".stars"); //操作星星
var r = 800; /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
for (var i = 0; i < stars; i++) {
var $star = $("<div/>").addClass("star"); //添加星星类
console.log($star)
$stars.append($star);
}
//这里创建出星星运动的轨迹
//选取出class = star 元素
//用this指的是这个对象
$(".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 + ")"})
})
})
最后得到的效果图
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
