当前位置：首页 > news >正文

20231106-前端学习加载和视频球特效

news 2025/12/15 23:25:59

加载效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加载效果</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"crossorigin="anonymous"></script><style>* {margin: 0;padding: 0;}body {background: #2980b9;}.loading {height: 40px;position: absolute;/* 使用绝对定位，相对于其最近的已定位祖先元素进行定位 */top: 50%;/* 将加载动画容器的顶部位置设为屏幕垂直中心 */left: 50%;/* 将加载动画容器的左侧位置设为屏幕水平中心 */display: flex;/* 使用弹性盒子布局 */transform: translate(-50%, -50%);/* 使用平移变换将加载动画容器水平和垂直居中 */align-items: center;/* 在交叉轴上居中对齐（垂直居中） */}.object {width: 6px;height: 40px;background: white;margin: 0 3px;border-radius: 10px;animation: loading 0.8s infinite;/* 使用名为 "loading" 的动画，持续时间为 0.8 秒，无限循环播放 */animation-play-state: paused;/* 初始状态为暂停 */}.xyBtn {position: absolute;top: 60%;left: 50%;transform: translate(-40%, -50%);}.object:nth-child(2) {animation-delay: 0.1s;/* 延迟 0.1 秒开始播放动画 */}.object:nth-child(3) {animation-delay: 0.2s;}.object:nth-child(4) {animation-delay: 0.3s;}.object:nth-child(5) {animation-delay: 0.4s;}.object:nth-child(6) {animation-delay: 0.5s;}.object:nth-child(7) {animation-delay: 0.6s;}.object:nth-child(8) {animation-delay: 0.7s;}@keyframes loading {0% {height: 0;}50% {height: 40px;}100% {height: 0;}}.animate {animation-play-state: running;/* 设置动画状态为运行中 */}.paused {animation-play-state: paused;/* 设置动画状态为暂停 */}</style>
</head><body><div class="loading"><div class="object"></div><div class="object"></div><div class="object"></div><div class="object"></div><div class="object"></div><div class="object"></div><div class="object"></div><div class="object"></div></div><button type="button" class="btn btn-info xyBtn" id="toggleButton">开始动画</button><script>var toggleButton = document.getElementById("toggleButton");var objectElements = document.getElementsByClassName("object");var animationState = false;// 添加按钮点击事件处理程序toggleButton.addEventListener("click", function () {animationState = !animationState;if (animationState) {for (var i = 0; i < objectElements.length; i++) {objectElements[i].classList.add("animate");/* 添加 "animate" 类，开始播放动画 */objectElements[i].classList.remove("paused");/* 移除 "paused" 类，确保动画处于运行状态 */}toggleButton.textContent = "暂停动画";// 更新按钮文本为"暂停动画"} else {for (var i = 0; i < objectElements.length; i++) {objectElements[i].classList.add("paused");objectElements[i].classList.remove("animate");}toggleButton.textContent = "开始动画";// 更新按钮文本为"开始动画"}});</script>
</body></html>

创意视频球特效

代码

<!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 {overflow: hidden;/* 隐藏页面的滚动条 */}section {position: absolute;/* 绝对定位 */top: -100px;left: -100px;right: -100px;bottom: -100px;display: flex;/* 使用弹性布局 */justify-content: center;/* 水平居中对齐 */align-items: center;/* 垂直居中对齐 */}section video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;/* 使用 cover 填充视频 */filter: blur(35px);/* 添加模糊效果 */}section .sphere {position: relative;/* 相对定位 */width: 600px;height: 600px;border-radius: 50%;z-index: 10;}section .sphere::before {content: "";/* 伪元素内容为空 */position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;border-radius: 50%;box-shadow: inset 0 100px 100px rgba(255, 255, 255, 0.5),/* 内阴影效果 */inset 0 -100px 100px rgba(0, 0, 0, 1),inset 0 0 100px rgba(0, 0, 0, 1);}section .sphere::after {content: "";position: absolute;top: 550px;left: -50px;width: 700px;height: 100px;z-index: -1;border-radius: 50%;background: black;background: radial-gradient(black, transparent, transparent);/* 底部渐变效果 */}section .sphere video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;border-radius: 50%;filter: blur(0);/* 取消模糊效果 */}section .controls {/* background-color: aqua; */position: absolute;bottom: 100px;left: 50%;transform: translateX(-50%);display: flex;align-items: center;}section .controls button {background: none;border: none;outline: none;cursor: pointer;color: white;font-size: 20px;margin-right: 10px;font-family: 'Times New Roman', Times, serif;}section .controls input[type="range"] {width: 800px;margin-right: 10px;}section .controls span {color: white;font-size: 18px;font-family: 'Times New Roman', Times, serif;}</style>
</head><body><section><video id="backgroundVideo" src="../Videos/1-“挑 战 B 站 画 质 上 限”-4K 超清-AVC.mp4"></video><div class="sphere"><video id="sphereVideo" src="../Videos/1-“挑 战 B 站 画 质 上 限”-4K 超清-AVC.mp4"></video></div><div class="controls"><button id="playPauseButton">播放</button><input type="range" id="progressBar" min="0" step="0.001"><span id="currentTime">00:00</span>&nbsp;<span>/</span>&nbsp;<span id="duration">00:00</span></div></section><script>// 等待文档加载完成后执行document.addEventListener("DOMContentLoaded", function () {// 获取视频元素和控制按钮var backgroundVideo = document.getElementById("backgroundVideo"); // 背景视频元素var sphereVideo = document.getElementById("sphereVideo"); // 球形视频元素var playPauseButton = document.getElementById("playPauseButton"); // 播放/暂停按钮var progressBar = document.getElementById("progressBar"); // 进度条var currentTime = document.getElementById("currentTime"); // 当前时间var duration = document.getElementById("duration"); // 视频总时长// 初始状态下暂停视频backgroundVideo.pause();sphereVideo.pause();// 设置进度条初始值为0progressBar.value = 0;// // 在视频加载完成后获取最后一帧的画面并显示在视频元素上// backgroundVideo.addEventListener("loadeddata", function () {//   backgroundVideo.currentTime = backgroundVideo.duration; // 将视频播放位置设置为最后一帧//   backgroundVideo.pause(); // 暂停视频//   sphereVideo.currentTime = backgroundVideo.duration; // 将球形视频播放位置设置为最后一帧//   sphereVideo.pause(); // 暂停球形视频// });// 播放/暂停按钮点击事件playPauseButton.addEventListener("click", function () {if (backgroundVideo.paused) {// 如果背景视频暂停，则播放背景视频和球形视频backgroundVideo.play();sphereVideo.play();playPauseButton.textContent = "暂停"; // 更新按钮文本为"暂停"} else {// 如果背景视频正在播放，则暂停背景视频和球形视频backgroundVideo.pause();sphereVideo.pause();playPauseButton.textContent = "播放"; // 更新按钮文本为"播放"}});// 更新进度条和当前时间backgroundVideo.addEventListener("timeupdate", function () {// 计算视频播放进度（百分比）var progress = (backgroundVideo.currentTime / backgroundVideo.duration) * 100;progressBar.value = progress; // 更新进度条的值currentTime.textContent = formatTime(backgroundVideo.currentTime); // 更新当前时间显示});// 改变视频播放位置progressBar.addEventListener("input", function () {// 计算进度条对应的视频播放时间var progressTime = (progressBar.value / 100) * backgroundVideo.duration;// 设置背景视频和球形视频的当前播放时间backgroundVideo.currentTime = progressTime;sphereVideo.currentTime = progressTime;currentTime.textContent = formatTime(progressTime); // 更新当前时间显示});// 将时间格式化为 mm:ss 格式function formatTime(time) {var minutes = Math.floor(time / 60); // 计算分钟数var seconds = Math.floor(time % 60); // 计算秒数// 格式化为 mm:ss 格式，并在分钟数或秒数小于10时添加前导零return (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;}// 更新视频总时长backgroundVideo.addEventListener("loadedmetadata", function () {duration.textContent = formatTime(backgroundVideo.duration); // 更新视频总时长显示});// 监听视频播放完毕事件backgroundVideo.addEventListener("ended", function () {// 在视频播放完毕后执行的操作playPauseButton.textContent = "播放"; // 更新按钮文本为"播放"progressBar.value = 0; // 重置进度条的值currentTime.textContent = "00:00"; // 重置当前时间显示});});</script>
</body></html>

20231106-前端学习加载和视频球特效

加载效果代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>加载效果</title><!-- 最新…...

编程日记 2023/11/8 0:19:54

Arrays.asList() 和 List.of() 的列表之争

1. 概述有时在Java中，为了方便，我们需要创建一个小列表或将数组转换为列表。Java 为此提供了一些辅助方法。在本文中，我们将比较初始化小型临时数组的两种主要方法：List.of()和 Array.asList()。 2. Arrays.asList() Java 自…...

编程日记 2023/11/8 0:18:50

基于51单片机的停车场管理系统仿真电路设计

**单片机设计介绍，基于51单片机的停车场管理系统仿真电路设计文章目录一概要二、功能设计设计思路三、软件设计原理图五、程序六、文章目录一概要停车场管理系统仿真电路设计介绍停车场管理系统主要用于自动化管理和控制停车场，以提高停车…...

编程日记 2023/11/8 0:17:49

APIView单一资源的查看更新删除一、构建路由 re_path("author/(/d)",AuthorDetailView.as_view)), 二、视图类在views.py中添加AuthorDetailView类 class AuthorDetailView(APIView):def get(self, request, pk):author Author.objects.get(pkpk)serializer A…...

编程日记 2023/11/8 0:16:48

UML--类图的表示

1. 类的表示 1.1 访问属性 : public -: private #: protected 1.2 接口与抽象类斜体表示抽象类和抽象方法 <<Interface>> 类表示接口 1.3 类图示意 Mclass- val: int getVal(): int 2. 类关系 2.1 实现关系空心三角形和虚线组成 B实现A,则三角形尖尖朝…...

编程日记 2023/11/8 0:15:47

JVM字节码文件浅谈

编程日记 2023/11/8 0:14:46

DBever 连接trino时区问题 The datetime zone id ‘GMT+08:00‘ is not recognised

DBever连接trino 测试连接成功，但是执行sql报时区不对、如果你默认使用的是大于jdk8的版本会存在这个问题，因为jdk版本 jdk8 和jdk17 版本默认时区是不同的 trino官网明确说明了时区默认跟jdk走解决方案可以先行查看JDK本地时区库版本，执…...

编程日记 2023/11/8 0:13:45

xlua源码分析（二）lua Call C#的无wrap实现

xlua源码分析（二）lua Call C#的无wrap实现上一节我们主要分析了xlua中C# Call lua的实现思路，本节我们将根据Examples 03_UIEvent，分析lua Call C#的底层实现。例子场景里有一个简单的UI面板，面板中包含一个input fie…...

编程日记 2023/11/8 0:12:43

MySql优化经验分享

一条sql的具体执行过程连接我们怎么查看MySQL当前有多少个连接？ 可以用show status命令，模糊匹配Thread， Show global status like "Thread%" show global variables like wait timeout;—非交互式超时时间，如JDBC…...

编程日记 2023/11/8 0:11:43

【Linux】：使用git命令行 || 在github创建项目 || Linux第一个小程序——进度条（进阶版本）

在本章开始之前还是先给大家分享一张图片这是C的笔试题感兴趣的同学可以去试一试有难度的哟也可以直接在牛客网直接搜索这几道题目哈好了今天我们正式进入我们的正题部分 🕖1.使用git命令行安装git yum install git🕠2.在github创建项目使用…...

编程日记 2023/11/8 0:10:42

Kotlin apply 交换两个数

代码： fun main() {var a 1var b 2a b.apply {b aprintln("$b")println("$this")}println("$a $b") }打印结果： 1 2 2 1原理分析： /*** Calls the specified function [block] with this value as its r…...

编程日记 2023/11/8 0:09:41

Android jetpack ： Navigation 导航路由、单个Activity嵌套多个Fragment的UI架构方式

Android Navigation 如何动态的更换StartDestination &&保存Fragment状态 Navigation(一)基础入门 google 官网 ： Navigation 导航路由讨论了两年的 Navigation 保存 Fragment 状态问题居然被关闭了 Navigation是一种导航的概念，即把Activ…...

编程日记 2023/11/8 0:08:40

【react】在react中祖父、父亲、孙子组件层层解构其余属性props时报错children.forEach is not function

起因报错children.forEacht is not function 分析原因由于地址组件本身存在options，此时父组件又传递…otherProps，且解构了父级组件的otherProps，其中others解构后的属性就有options，因此产生了属性冲突，导致属性…...

编程日记 2023/11/8 0:07:39

P9831 [ICPC2020 Shanghai R] Gitignore

P9831 [ICPC2020 Shanghai R] Gitignore - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 只看题意翻译这道题是做不出来的，还要去看英文里面的规定（这里就不放英文了），主要问题是不要公用子文件夹。例如: 1 / a / 2 2 / a / 3…...

编程日记 2023/11/8 0:06:37

LinkList集合方法（自写）

在使用以下方法时需要定义一个LinkNode类来定义变量，new一个新对象进行调用，输出时需要定义输出方法 public class ListNode {int value;ListNode next;//public ListNode(int value) {this.value value;}public String toString(){return "ListN…...

编程日记 2023/11/8 0:05:36

Ansible playbook自动化运维工具详解

Ansible playbook自动化运维工具详解一、playbook的相关知识1.1、playbook 的简介1.2、playbook的各部分组成二、基础的playbook剧本编写实例三、 playbook的定义、引用变量3.1、基础变量的定义与引用3.2、引用fact信息中的变量四、playbook中的when条件判断和变量循环使用…...

编程日记 2023/11/8 0:04:34

图像切分：将一张长图片切分为指定长宽的多张图片

1.需求比如有一张很长的图片其大小为宽度779，高度为122552，那我想把图片切分为779乘以1280的格式。步骤如下： 使用图像处理库（如PIL或OpenCV）加载原始图片。确定子图片的宽度和高度。计算原始图片的宽度和高度&am…...

编程日记 2023/11/8 0:03:33

ROS学习笔记（5）:ros_control

1.ros_control简介 ros_control - ROS Wiki ros_control是为ROS提供的机器人控制包，包含一系列控制器接口、传动装置接口、控制器工具箱等,有效帮助机器人应用功能包快速落地，提高开发效率。 2.ros_control框架 ros_control总体框架： 针对…...

编程日记 2023/11/8 0:02:31

《008.Springboot+vue之自习室选座系统》

[火]《008.Springbootvue之自习室选座系统》项目简介 [1]本系统涉及到的技术主要如下： 推荐环境配置：DEA jdk1.8 Maven MySQL 前后端分离; 后台：SpringBootMybatisredis; 前台：vueElementUI; [2]功能模块展示： 前端…...

编程日记 2023/11/8 0:01:30

道可云元宇宙每日资讯｜5G数智新时代元宇宙发展论坛在厦门举办

道可云元宇宙每日简报（2023年11月6日）讯，今日元宇宙新鲜事有： 5G数智新时代元宇宙发展论坛在厦门举办 3日，由2023年中国金鸡百花电影节执委会主办、厦门电影节有限公司协办的“5G数智新时代元宇宙发展论坛暨‘中国白德…...

编程日记 2023/11/7 23:59:28

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下：隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2025/12/10 10:18:18

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

使用分级同态加密防御梯度泄漏

抽象联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...

编程新知 2025/12/14 17:46:27

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/12/13 5:55:42

OPenCV CUDA模块图像处理-----对图像执行均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在 GPU 上对图像执行均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。该函数将输入图像中的…...

编程新知 2025/12/5 15:23:48

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/12/15 11:08:22

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/12/15 18:01:37

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...

编程新知 2025/11/22 6:37:27

加载效果

代码

创意视频球特效

代码

相关文章：