模拟播放暂停特效

原创 已于 2025-06-27 13:56:02 修改 · 463 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

于 2025-05-27 15:26:45 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟播放暂停特效</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        
        .player-container {
            text-align: center;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .play-btn {
            width: 80px;
            height: 80px;
            background-color: #4CAF50;
            border-radius: 50%;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .play-btn:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        
        .play-btn:active {
            transform: scale(0.95);
        }
        
        .play-icon, .pause-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: opacity 0.3s ease;
        }
        
        .pause-icon {
            opacity: 0;
        }
        
        .playing .play-icon {
            opacity: 0;
        }
        
        .playing .pause-icon {
            opacity: 1;
        }
        
        .progress-container {
            width: 300px;
            height: 6px;
            background-color: #ddd;
            border-radius: 3px;
            margin: 20px auto;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background-color: #4CAF50;
            transition: width 0.1s linear;
        }
        
        .time-display {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            color: #666;
            font-size: 14px;
        }
        
        .title {
            margin-bottom: 20px;
            color: #333;
        }
        
        .footer {
            margin-top: 30px;
            font-size: 12px;
            color: #999;
        }
        
        .footer a {
            color: #4CAF50;
            text-decoration: none;
        }
        
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="player-container">
        <h2 class="title">音乐播放器</h2>
        
        <button class="play-btn" id="playButton">
            <div class="play-icon">▶</div>
            <div class="pause-icon">❚❚</div>
        </button>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="time-display">
            <span id="currentTime">0:00</span>
            <span id="duration">3:45</span>
        </div>
        
        <div class="footer">

        </div>
    </div>

    <script>
        const playButton = document.getElementById('playButton');
        const progressBar = document.getElementById('progressBar');
        const currentTimeDisplay = document.getElementById('currentTime');
        const durationDisplay = document.getElementById('duration');
        
        let isPlaying = false;
        let progress = 0;
        let interval;
        
        // 模拟音频时长 (3分45秒)
        const totalDuration = 225; // 秒
        
        // 格式化时间为 MM:SS
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
        }
        
        // 更新进度条
        function updateProgress() {
            progress += 0.1;
            const percentage = (progress / totalDuration) * 100;
            progressBar.style.width = `${percentage}%`;
            currentTimeDisplay.textContent = formatTime(progress);
            
            if (progress >= totalDuration) {
                clearInterval(interval);
                isPlaying = false;
                playButton.classList.remove('playing');
                progress = 0;
                progressBar.style.width = '0%';
                currentTimeDisplay.textContent = '0:00';
            }
        }
        
        // 播放/暂停按钮点击事件
        playButton.addEventListener('click', function() {
            isPlaying = !isPlaying;
            
            if (isPlaying) {
                playButton.classList.add('playing');
                interval = setInterval(updateProgress, 100);
            } else {
                playButton.classList.remove('playing');
                clearInterval(interval);
            }
        });
        
        // 初始化显示总时长
        durationDisplay.textContent = formatTime(totalDuration);
    </script>
</body>
</html>

ziblog
关注
Unity-粒子特效
AD_GOD的博客
04-24 1万+
粒子特效创建粒子系统模块 创建粒子系统 方法一：创建一个空物体(游戏物体)，给物体加上Particle System组件。 方法二：在Hierarchy视图右击 选择 Effects 中的Particle System 模块 Initial 初始化模块 Particle System固有的模块 模块介绍 属性 中文名 功能 Duration 持续时间 粒子的发射时长；如果选择Looping则粒子时长为一个生命周期 Looping 循环播放 如果选中，则在持续时间之后重复发射周期。
HTML5视频播放与特效开发全攻略
weixin_42113456的博客
08-19 654
标签可以控制视频的播放、暂停、调整音量等，使网页的互动性得到了极大的提升。为了提供更丰富的用户体验，我们常常需要实现自定义的播放器控件。这涉及到对<video>元素的更多属性和事件进行操作。例如，我们可以创建一个时间轴滑块，允许用户通过拖动来跳到视频的任意位置。下面的代码演示了如何实现这一点：
实现互动式HTML5 MP3音乐盒播放特效
weixin_35749786的博客
04-29 895
随着Web应用程序的普及，网络攻击手段不断进化，安全问题成为开发者不可忽视的要素。对于在线音乐盒，常见的攻击包括跨站脚本攻击（XSS）、跨站请求伪造（CSRF）以及点击劫持等。以下是一些防范措施：XSS防护：使用内容安全策略（CSP）限制资源加载，对用户输入进行严格的验证与过滤，确保所有动态内容在插入页面前被转义或使用DOM操作时注意上下文。CSRF防护：为每个请求设置唯一的令牌，使用SameSite属性的cookies或者要求二次验证等，提高攻击难度。点击劫持防护。
Javascript特效之模拟抽奖程序
a271720559的博客
07-05 1526
Javascript特效之模拟抽奖程序我们经常会看到一些抽奖程序，应该很多都是H5做的，今天我们来看看js怎么实现类似抽奖的程序。效果图：点击开始时，会一直跳动文本框的值直到我们点击停止。就类似抽奖的效果。不过这个几率没法设置。实现思路：我们先预设好参与抽奖的内容。再写一个setInterval重复执行函数，让文本框一直随机显示我们预设的内容。点击停止时则清除setInterval即可。js代码：...
html怎么设置加载特效,html： 模拟数据加载时的动画效果
weixin_29767975的博客
06-10 1514
前言html网页中的动画效果，可以使用CSS中“@keyframes”定义关键帧动画，也就是定义一些初始状态、中间状态、介绍状态，然后使用animation来完成动画的显示。首先来看一下animation有哪些可以设置的属性：1、animation-name 动画名称2、animation-duration 动画时间3、animation-timing-function 动画曲线 linear(匀...
Unity3D 屏幕点击特效
2301_76984003的博客
06-22 566
实现点击屏幕任意位置播放点击特效。
14、JavaFX特效与动画应用指南
sat99的博客
08-08 40
本文详细介绍了JavaFX中各种特效和动画的应用方法，包括透视变换、发光、泛光、位移映射等特效的使用，以及时间线和关键帧实现动画效果。通过示例代码讲解了如何结合特效与动画，创建生动的界面，为开发者提供了丰富的视觉效果实现方案。
13、JavaFX特效与动画应用指南
sre5engineer的博客
07-05 99
本文详细介绍了如何在JavaFX中应用多种视觉特效和动画效果，包括透视变换、发光、泛光、位移映射等特效，以及时间轴和关键帧驱动的动画实现。同时提供了综合应用建议、性能优化策略和兼容性考虑，帮助开发者打造生动且高效的用户界面。
ripple游戏水波模拟_Ripple [水波] 程序实现水波效果 水纹特效 算法
weixin_39968592的博客
12-29 234
看到左边这幅动画(如果没有出现，请耐心的稍等片刻)，你也许不会相信它其实是用电脑做出来的，这就是“水波”特效的魅力所在。在介绍编程之前，先让我们来回顾一下在高中的物理课上我们所学的关于水波的知识。水波有如下几个特性：扩散：当你投一块石头到水中，你会看到一个以石头入水点为圆心所形成的一圈圈的水波，这里，你可能会被这个现象所误导，以为水波上的每一点都是以石头入水点为中心向外扩散的，这是错误的。实际上...
可自动播放暂停的相册特效特效代码
03-20
【可自动播放暂停的相册特效特效代码】是一种利用jQuery库实现的动态相册功能，旨在为用户提供一种既能自动播放又能随时暂停的视觉体验。在网页设计中，这样的相册特效能够增强用户体验，使得网站的图片展示更加生动...
幻灯片特效播放特效代码
03-20
同时，为了确保用户体验，还会加入暂停功能，当用户鼠标悬停在幻灯片上时，自动播放停止，鼠标离开后恢复。 其次，"鼠标点击缩略图片，大图片类似滤镜百叶窗图片切换效果"这部分描述，意味着幻灯片不仅有自动播放，...
精选资源
jQuery播放暂停数字滚动抽奖特效代码
03-20
**jQuery播放暂停数字滚动抽奖特效代码详解** 在Web开发中，抽奖系统是吸引用户参与活动的一种常见手段。本文将深入探讨如何使用jQuery实现一个具备播放、暂停功能的数字滚动抽奖特效，同时具备随机性和不重复性的...
精选资源
jQuery模拟键盘输入文字效果特效特效代码
03-20
同时，为了实现暂停和开始功能，可以使用JavaScript的`clearTimeout`或`clearInterval`停止定时器，然后重新调用定时器函数来恢复动画。 此外，颜色和背景色的设置可以通过CSS完成，jQuery可以用来动态修改元素的...
精选资源
JS模拟进度条特效代码
03-20
在JavaScript中，模拟进度条特效是一项常见的前端开发任务，它能为用户界面提供动态反馈，增强用户体验。在本文中，我们将深入探讨如何使用JavaScript来创建一个功能丰富的进度条特效。 首先，进度条通常由HTML元素...
CSS 选择器
froginwe11的博客
12-07 369
CSS选择器是CSS样式规则的基础，正确使用选择器可以有效地提高网页样式设计的效率。本文介绍了CSS选择器的类型、使用方法和注意事项，希望对您有所帮助。
grid布局之-子项放置1
最新发布
syt_1013的博客
12-11 876
* 第1个数字是行的起始线，第2个数字是列的起始线，第3个数字是行跨越几个格子，第4个数字是列跨越几个格子， *//* 第1个数字是行的起始线，第2个数字是列的起始线，第3个数字是行的终止线，第4个数字是列的终止线， */第二种的写法比较灵活，假如后面想把aside的列放到右边，只需要改这块。/* 速写属性 grid-row和grid-column *//* 该写法表示跨越两个格子 */grid-template速写属性。/* 在父容器中定义 *//* 速写属性 */
avue uploader图片预览拉伸变型的css处理方法
经验之谈，不做搬运工
12-10 196
摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。
vue.js 3的页面中css里的:deep()是干什么的
zlpzlpzyd的专栏
12-08 181
摘要：:deep()是Vue3特有的CSS深度选择器，用于在scoped样式中穿透子组件样式隔离。它会被Vue编译器转换为带[data-v-*]的属性选择器，处理顺序先于PostCSS。这种机制支持有选择地修改子组件内部样式，是组件库定制的重要工具。开发时使用.parent:deep(.child.item)语法，最终编译为带作用域属性的选择器，实现样式穿透的同时保持隔离特性。
86【CSS的模块化处理】
vbnetcx的博客
12-08 207
本文介绍了将CSS代码从HTML文件中分离为独立文件的方法。通过在data文件夹下创建1.css文件编写样式代码，然后在HTML文件的head部分使用<link>标签引用该CSS文件。这种方法避免了在多个HTML文件中重复编写相同CSS代码的问题，便于后期统一修改和维护。示例中展示了1.css文件定义红色文本样式，并在HTML文件中通过id选择器应用该样式的完整实现过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值