css动态背景制作,CSS星空动态背景

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 然后注册组件,在父容器里使用