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

加载效果

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载效果title>
  
  <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">
  
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

创意视频球特效

代码

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:00span> 
      <span>/span> 
      <span id="duration">00:00span>
    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();

      // 设置进度条初始值为0
      progressBar.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

相关阅读:
路飞项目多方式登录、手机号短信验证注册接口
 Linux开发工具之调试器gdb
OpenCV-C++选择、提取感兴趣区域(ROI区域)【附用鼠标选取ROI区域的代码】
CiteSpace关键词共现图谱含义详细解析与注意事项
 flutter 实现表单的封装包含下拉框和输入框
 Spacewalk
hivehook 表血缘与字段血缘的解析
 基于Java纯净水商城配送系统设计与实现开题报告
 博客园商业化之路：融资做与众不同的众包平台，让开发能力成为一种服务
 AIR32F103(四) 27倍频216MHz,CoreMark跑分测试
原文地址：https://blog.csdn.net/qq_44887198/article/details/134245723