圣诞节快到了，安排个特效，快去哄哄别人npy...

最新推荐文章于 2024-08-09 11:41:07 发布
最新推荐文章于 2024-08-09 11:41:07 发布
阅读量303 收藏 5
点赞数 1
分类专栏： JavaScript / jQuery效果 文章标签： css html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47969241/article/details/121992250
版权

废话不多说直接上代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞树</title>
    <script src="./JS/vue.min.js"></script>
    <style>
        #can {
            position: absolute;
            top: 0px;
            left: 0px;
            color: white;
        }
        body {
            background-color: black;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
            /* perspective: 1200px; */
            background-image: url(./img/525.jpg);
            background-size: 100% 100%;
            background-origin: content-box;
            animation: tp 25s linear infinite alternate 1s;
        }
        @keyframes tp {
            0%{
                background-size: 100% 100%;
            }
            100%{
                background-size: 120% 120%;
            }
        }
        .act {
            position: absolute;
            background-color: white;
            width: 300px;
            height: 300px;
            -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
            clip-path: polygon(50% 0, 0% 100%, 100% 100%);
            transform: rotateY(calc(var(--i)*36deg));
            background-image: url(./img/525.jpg);
            transform-style: preserve-3d;
            transform-origin: center center;
            animation: hh 50s linear infinite alternate;
            background-size: contain;
        }
        @keyframes hh {
            10%{
                background-image: url(./img/1.png);
            }
            20%{
                background-image: url(./img/3.png);
            }
            30%{
                background-image: url(./img/2.png);
            }
            40%{
                background-image: url(./img/4.png);
            }
            50%{
                background-image: url(./img/5.png);
            }
            60%{
                background-image: url(./img/6.png);
            }
            70%{
                background-image: url(./img/7.png);
            }
            80%{
                background-image: url(./img/8.png);
            }
            90%{
                background-image: url(./img/9.png);
            }
        }
        #box{
            width: 50vw;
            height: 50vw;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
            position: relative;
            perspective: 5000px;
            perspective-origin: center center;
            top: 50px;
            animation: db 12s linear infinite;
        }
        @keyframes db {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
        html {
            overflow: hidden;
        }

        #can {
            filter: blur(2px);
            z-index: -1;
        }
        #can2{
            position: absolute;
            z-index: -2;
        }
        #canvas{
            position: absolute;
            z-index: -3;
        }
        .bz{
            width: 20px;
            position: absolute;
            height: 200px;
            top: 520px;
            transform: rotateY(calc(var(--i)*36deg));
            background-image: url(./img/3.png);
            background-size: contain;
        }
        /* #bg{
            width: 100vw;
            height: 100vh;
            position: absolute;
            z-index: 99;
            background-image: url(./img/525.jpg);
            background-size: 100% 100%;
        } */
    </style>
</head>

<body>
    <div id="box">
        <div v-for="(item, index) in 100" :key="index" class="act" :key="index" :style="'--i:'+index">{{index}}</div>
        <div v-for="(item, index) in 100" :key="index" class="bz" :style="'--i:'+index"></div>
    </div>

    
    <canvas id="can2"></canvas>
    <canvas id="can"></canvas>
    <canvas id="canvas"></canvas>
    <!-- <div id="bg"></div> -->
    <script>
        const vm = new Vue({
            el: "#box",
        })

        /**@type{HTMLCanvasElement}*/
        const can = document.getElementById("can");
        const ctx = can.getContext("2d");
        can.width = window.innerWidth;
        can.height = window.innerHeight;
        window.onresize = function () {
            can.width = window.innerWidth;
            can.height = window.innerHeight
        }
        let arr = [];

        class Xue {
            constructor() {
                this.x = this.Random().x;
                this.y = this.Random().y;
                this.r = this.Random().r;
                this.color = "white";
                this.v = this.Random().v;
                this._v = this.Random()._v;
                arr.push(this)
            };
            Random() {
                return {
                    x: Math.random() * can.width,
                    y: 0,
                    r: Math.random() * (4 - 1) + 1,
                    v: Math.random() * (5 - 0.54) + 0.54,
                    _v: (Math.random() * (1 + 1) - 1) * 1,
                }
            }
            Path() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }
            run() {
                this.x += this._v;
                this.y += this.v;
            }
            newS() {
                new Xue();
            }
        }

        function runs(shu) {
            for (let i = 0; i < shu; i++) {
                new Xue();
            }
            setTimeout(() => {
                for (let i = 0; i < arr.length; i++) {
                    arr[i].Path()
                    console.log(111);
                }
            }, 100)

        }
        runs(200);

        function start() {
            ctx.clearRect(0, 0, can.width, can.height)
            for (let i = 0; i < arr.length; i++) {
                arr[i].Path();
                arr[i].run()
                if (arr[i].y > can.height || arr[i].x > can.width || arr[i].x < 0) {
                    arr[i].newS()
                    arr.splice(i, 1);
                }
            }
            //  console.log(arr);
            requestAnimationFrame(start);
        }

        start();
    </script>
    <!-- <script src="./JS/yanhua.js"></script> -->
    <script src="./JS/yu.js"></script>
</body>
</html>

 这一段的js代码在这儿喔！！！

 

var canvas = document.getElementById("canvas")
var ctx3 = canvas.getContext("2d")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var meteors = [] 
var allstar = 40 
function init() { 
    for (var i = 0; i < allstar; i++) {
        newmeteor() 
    }
}
function newmeteor(){
    meteors.push({
        lines: [{ 
            x: parseInt(Math.random() * canvas.width),
            y: parseInt(Math.random() * canvas.height * 0.4),
        }],
        life: parseInt(Math.random() * 100) + 100,
        age: 0 
    })
}
function draw() {
    ctx3.clearRect(0, 0, canvas.width, canvas.height)
    for (var i = 0; i < meteors.length; i++) { 
        meteor = meteors[i] 
        lines = meteor.lines
        for (var j = 0; j < lines.length; j++) { 
            ctx3.fillStyle = "rgba(255,255,255," + j / lines.length + ")" 
            ctx3.fillRect(lines[j].x, lines[j].y, 1, 1) 
        }
        ctx3.fillStyle = "yellow" 
        var star = lines[lines.length-1] 
        ctx3.fillRect(star.x, star.y, 2, 2) 
        if (meteor.age <= meteor.life / 2) { 
            lines.push({ 
                x: star.x+1 ,
                y: star.y+0.3 
            })
        }
        else { 
            lines.shift()
        }
        meteor.age++ 
        if (meteor.age >= meteor.life) { 
            meteors.splice(i, 1)
            newmeteor()
        }

    }
}
init()
setInterval(draw, 1)

效果图如下：

 希望能帮助到你喔 [滑稽][滑稽]

无糖气泡
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
.npy文件_python——文件读写
weixin_39942992的博客
11-21 1369
一：Python中读写文件的方法1.open（）函数open(file,mode='r',buffering=-1,encoding=None,errors=None,newline=None,closefd=True,opener=None)file ： 是一个 path-like object，表示将要打开的文件的路径，可以是绝对路径也可以是相对路径，也可以是要被封装的整数类型文件描述符。如果...
Dex-Net的GQCNN模型需要的 .npy文件以及通过工具得到的.png格式深度图和 .npy文件的转换
走过路过不要错过
01-21 4024
Dex-Net的GQCNN模型需要的 .npy文件以及通过工具得到的.png格式深度图和 .npy文件的转换
.npy文件
热门推荐
qq_33472146的博客
06-04 5万+
深度学习–迁移学习 在使用训练好的模型时，其中有一种保存的模型文件格式叫.npy。 打开方式·实现代码： import numpy as np test=np.load('./bvlc_alexnet.npy',encoding = "latin1") #加载文件 doc = open('1.txt', 'a') #打开一个存储文件，并依次写入 print(test, file=doc) #...
Python实例 -- 如何将.npy文件转换为图片
奋斗の博客
04-12 1万+
为了节省空间，有时会将.jpg文件转换为.npy文件，这样便于存储，然后需要图片的时候，再将其转为.jpg文件，这个过程是如何实现的呢？为了演示这个案例，我们分为2步。 第1步：将.jpg文件保存为.npy文件 import PIL from PIL import Image path = './example.jpg' # # 将其保存为.npy文件 image = Image.open(path) image = image.resize((342, 256)) image = np.array(
Numpy文件交互：.npy和.npz有什么区别？
微小冷的学习笔记
01-20 3212
`Numpy`提供了以`.npy`为后缀的文件存储方案，与这种文件格式密切相关的读、写函数分别是`np.load`和`np.save`。通过`savez`可以一次性存储多个数组，并可通过`load`以键值对的形式读取出来；如果觉得文件太大，可以通过`savez_compressed`进行压缩。
模型保存文件.npy
yan的博客
07-11 4127
转自：https://blog.csdn.net/william_hehe/article/details/804122271.前言：在深度学习领域。有一个名词叫迁移学习。倍数贫穷人们所喜爱。拿来主意还是用着很舒服的嘛！在使用训练好的模型时，其中有一种保存的模型文件格式叫.npy。2.打开方式·实现代码：import numpy as np test=np.load('./bvlc_alexnet...
将.npy文件转化为灰度图像
a250225的博客
09-28 2324
import numpy as np import scipy.misc imgs_test = np.load(’./path_image/imgs_test.npy’) #读入.npy文件 print(imgs_test.shape) scipy.misc.imsave("./path_save/im" + “_testResults” + “.png”,imgs_test) ...
数据集.npy格式与png格式互换
简简单单
09-17 1万+
        深度学习中，有时我们需要对数据集进行预处理，这样能够更好的读取数据。 一、png格式生成.npy格式 import numpy as np import os from PIL import Image dir="C:/Users/Administrator/Desktop/trainA" def getFileArr(dir): result_arr=[] ...
.wav音乐文件转换为.fft.npy频谱格式文件
beyond谚语的博客
05-05 1064
需要修改的地方 十个文件夹，每个文件夹下都有100首.au格式的音乐，这里举个例子，那其中5个类别进行转换 genre_list = ["classical", "jazz", "country", "pop", "rock", "metal"] 根据文件路径定义列表，到时候就可以方便进行遍历 rad = "d:/genres/"+g+"/converted/"+g+"."+str(n).zfill(5)+".au.wav"为要转变的wav文件的路径 sad = "d:/trainset/"+g+"."+
vgg16.npy,vgg19.npy
03-18
提供的链接指向百度云的两个`.npy`文件，很可能是VGG16和VGG19模型的权重文件。下载并加载这些文件后，可以将它们应用于自己的图像分类任务，或者作为迁移学习的基础模型，通过微调来适应新的数据集。 使用VGG16或...
Matlab-在matlab中读+写Numpy.NPY文件实现.zip
02-28
你可以创建一个Python脚本，如`write_npy.py`，来保存MATLAB数据到.npy文件： ```python import numpy as np def write_npy(filename, data): np.save(filename, data) if __name__ == "__main__": import sys ...
vgg19.npy 实测真实可用
04-21
总的来说，"vgg19.npy"代表了一个强大的预训练深度学习模型，它体现了深度学习领域对深度和复杂性的探索，以及在大规模图像识别任务中的优秀表现。在实际使用中，开发者应结合适当的工具和方法，充分发挥其潜力，...
opencvPython01_opencv视频播放器_npy.38.com_
10-02
OpenCV（开源计算机视觉库）是计算机视觉和机器学习领域广泛应用的一个强大工具，它支持多种编程语言，包括Python。在给定的标题“opencvPython01_opencv视频播放器_npy.38.com_”中，我们可以推断这是一个基于...
ml-wikipedia.npy.zip -人工智能-深度学习-动态图数据集
09-06
标题中的“ml-wikipedia.npy.zip”是一个压缩包文件，它包含了一个名为“ml_wikipedia.npy”的数据文件。这个数据集是专门为人工智能（AI）领域的深度学习应用设计的，特别是与图神经网络（Graph Neural Networks, ...
CSS 多按钮根据半圆弧度排列
前端技术
08-08 317
多个按钮根据弧度，延边均匀排列。
CSS（层叠样式表）
Chujun123528的博客
08-09 602
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
CSS基础
最新发布
weixin_45086164的博客
08-09 488
CSS基础
前端（HTML + CSS）学成在线项目（仿）
li3123537691的博客
08-06 459
头部区域 + banner区域 + 精品推荐区域，这三个区域都是版心居中。头部区域分为：logo + 导航 + 搜索 + 用户四个小块。banner区域分为：左侧导航 + 背景图 + 右侧课程表。HTML（index.html）代码。精品推荐课程区域（版心居中）鼠标悬停 :hover效果。鼠标悬停 :hover效果。鼠标悬停 :hover效果。数据分析师区域（版心居中）编程入门区域（版心居中）
transformer pred.npy true.npy 结果
11-25
根据提供的信息，可以推测"transformer pred.npy"和"true.npy"应该是两个文件的名称，分别表示Transformer模型预测的结果文件和真实结果文件。 "transformer pred.npy"文件应该是Transformer模型对某个任务或数据集...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值