sharo1
2021/7/1 12:13:40
父容器 {/*设置宽高*/
width: 100%;
height: 100%;
/*下面的属性是必须的*/
position: relative;
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;
}
组件:
transformOrigin:'0 0 '+(distance+Math.random()*300)+'px',
transform:'translate3d(0,0,-'+(distance+Math.random()*300)+'px) rotateY('+(Math.random()*360)+'deg) rotateX('+(Math.random()*-50)+'deg) scale('+(0.2+Math.random())+','+(0.2+Math.random())+')'
}">
export default {
name: "star-bg",
data() {
return {}
},
methods: {},
props: {
stars: {
type: Number,
default: 1000
},
distance: {
type: Number,
default: 800
}
},
}
body {
}
@keyframes rotate {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
}
}
.star-bg{
background-color: transparent;
transform: perspective(500px);
transform-style: preserve-3d;
position: absolute;
bottom: 0;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 90s infinite linear;
}
.star-bg-star {
width: 2px;
height: 2px;
background: #f8f8ee;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0 -300px;
transform: translate3d(0, 0, -300px);
backface-visibility: hidden;
}
使用: 向父容器添加css 然后注册组件,在父容器里使用
