
<template>
  <div class="about">
    <div class="stars">
      <div  v-for="(item,index) in starsCount" :key="index" class="star" ref="star">
 
      </div>
    </div>
 <div style="background-color: #f7f7b6;margin-top: 20px;width: 100px">这里方自己写的东西</div>
  </div>
 
</template>
<script>
export  default {
  data(){
    return{
      starsCount:1000,//星星数量
      distance:800//间距
    }
 
  },
  mounted(){
    let starArr = this.$refs.star
    starArr.forEach(item => {
      var speed = 0.2 + (Math.random() * 1);
      var 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>
.about {
  margin: 0px; /*// 去除外边距*/
  width: 100%; /*// 宽度占满容器*/
  height: 100vh; /*// 高度占满视窗高度*/
  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92,#1b2947);
  /* 第一个渐变背景，200% 100%定义了椭圆形状，起点在容器底部中心 */
  background: radial-gradient(220% 105% at top center, #1b2947 10%,#75517d 40%,#e96f92 ,#f7f7b6);
  /* 第二个渐变背景覆盖第一个，从顶部中心开始，不同颜色在不同位置 */
  background-attachment: fixed; /*// 背景固定，滚动时背景不动*/
  overflow: hidden;/* // 隐藏超出容器部分的内容*/
}
 
@keyframes rotate {
  0% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); }
  100% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); }
  /* 定义了一个名为rotate的动画，从0%到100%完成一周的Y轴旋转 */
}
.stars {
  transform: perspective(500px); /*// 设置3D透视点*/
  transform-style: preserve-3d; /*// 保持子元素的3D位置*/
  position: absolute; /*// 绝对定位*/
  perspective-origin: 50% 100%;/* // 透视原点位于容器的底部中心*/
  left: 50%; /*// 水平居中*/
  animation: rotate 200s infinite linear;/* // 应用rotate动画，无限循环，持续90秒，速度均匀*/
bottom: 0;
}
.star {
  width: 4px; /*// 宽度为2像素*/
  height: 4px; /*// 高度为2像素*/
  background: #f7f7b8; /*// 背景颜色为浅黄色*/
  position: absolute; /*// 绝对定位*/
  top: 0; /*// 顶部对齐*/
  left: 0; /*// 左侧对齐*/
  backface-visibility: hidden; /*// 背面不可见，用于3D旋转时*/
}
</style>

案例2雪花


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪花</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(./images/beijin.png);
            background-size: cover;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        let canvas=document.querySelector('canvas');
        let context =canvas.getContext('2d');
        let w=window.innerWidth;
        let h=window.innerHeight;
        canvas.width=w;
        canvas.height=h;
 
 
        let num=200;
        let snows=[];
        for(let i=0;i<num;i++){
           snows.push({
            x:Math.random()*w,
            y:Math.random()*h,
            r:Math.random()*10+1
 
           })
        }
let move=()=>{
    for(let i=0;i<num;i++){
                let snow=snows[i];
           snow.x+=Math.random()*2+1;
           snow.y+=Math.random()*2+1;
           if(snow.x>w){
            snow.x=0
           }  if(snow.y>h){
            snow.y=0
           }
            }
 
}
        let draw=()=>{
            context.clearRect(0,0,w,h);
            context.beginPath();
            context.fillStyle='rgb(255,255,255)';
            context.shadowColor='rgb(255,255,255)';
            context.shadowBlur=10
            for(let i=0;i<num;i++){
                let snow=snows[i];
                context.moveTo(snow.x,snow.y);
                context.arc(snow.x,snow.y,snow.r,0,Math.PI*2)
            }
            context.fill();
            context.closePath();
            move();
        }
        
        setInterval(draw,30)
    </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/965082