vue实现动态星空效果
B站地址:https://www.bilibili.com/video/BV1XJ411a7Mf/?spm_id_from=333.788.videocard.18在此之前,要先安装 less less-loaderwebpack.base.conf.js{test: /\.less$/,use: [{loader: "style-l...
·
B站地址:https://www.bilibili.com/video/BV1XJ411a7Mf/?spm_id_from=333.788.videocard.18
在此之前,要先安装 less less-loader
webpack.base.conf.js
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader", options: {
strictMath: true,
noIeCompat: true
}
}]
},
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-notes</title>
<style>
body {
background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
background-attachment: fixed;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div class="stars">
<div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
</div>
</template>
<script>
export default {
data () {
return {
starsCount: 800,
distance: 800
}
},
mounted () {
let starArr = this.$refs.star
starArr.forEach(item => {
let speed = 0.2 + (Math.random() * 1)
let thisDistance = this.distance + (Math.random() * 300)
item.style.transformOrigin = `0 0 ${thisDistance}px`
item.style.transform = `translate3d(0, 0, -${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed}, ${speed})`
})
}
}
</script>
<style scoped lang="less">
@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;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 90s infinite linear;
bottom: 0;
}
.star {
width: 2px;
height: 2px;
background: #f7f7b8;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
</style>
上一下效果图
就是这么唯美✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨❗️❗️❗️❗️
学习一下这里面的一些知识点(作为一名小白,我只能惊叹大佬的技术)😇😇😇
- radial-gradient() 函数 用径向渐变创建 “图像”。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。(以中心为起点)
- background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
- perspective属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时,比正常小,大小程度由该属性的值决定。当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身。
- perspective-origin: 50% 100%; 定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。注释:该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素。
- backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时,该属性很有用。
- scale(x,y) 定义 2D 缩放转换。
关注公众号:大明贵妇,无套路获取前端学习资料,期待各位客官来临
更多推荐
已为社区贡献12条内容
所有评论(0)