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

加载效果

代码

<!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>