亚伦影音工作室 发表于 2024-12-8 06:50

利用'block' 'none'遮罩来实现动图暂停和开启（高手绕过）

本帖最后由 亚伦影音工作室 于 2024-12-9 09:34 编辑 <br /><br />:
<style>
#cndpt{margin: 0px -200px ; opacity:1;
    position: relative;width: 960px; height: 520px;
    background: url(https://pic.imgdb.cn/item/675567e5d0e0a243d4dff81a.gif)no-repeat center/cover; }
#enopg{
    position: relative;width: 960px; height: 520px;
   background: url(https://pic.imgdb.cn/item/675567edd0e0a243d4dff81b.png) no-repeat center/cover;
    display:none;
}
#mypic{top:12%; left:85%;background: url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)no-repeat center/cover;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#fff 1px 0px 1px );z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
    #but {width: 120px; height: 120px;}
</style>
<div id="cndpt">
<div id="enopg"></div>
<div   id="mypic">
<div id="but" onclick="pic()"></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';
    } else {
    imgElement .style.display = 'none';
    }
}

mypic.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');   
</script >

亚伦影音工作室 发表于 2024-12-8 06:50

本帖最后由 亚伦影音工作室 于 2024-12-8 06:47 编辑

上边是效果
说白了就是一张静图和一张动图通过按钮相互切换。可以用在制作音画和播放器暂停和播放按钮上，当然你可以展开想象充分利用。动图和静图的来源我想说说，如果是智能手机有截取视频功能，在获取动图的时候别忘了获取静图，把一静一动的图发送到你的电脑上，再上传图床网盘获取地址，就能用了，这里我也不想多说，大家都是行家！
全部代码如下
<style>
#cndpt{margin: 0px -200px ; opacity:1;
    position: relative;width: 960px; height: 520px;
    background: url(动图地址）no-repeat center/cover; }
#enopg{
    position: relative;width: 960px; height: 520px;
   background: url(静图地址）no-repeat center/cover;
    display:none;
}
#mypic{top:12%; left:85%;background: url(播放器按钮图地址）no-repeat center/cover;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#fff 1px 0px 1px );z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
    #but {width: 120px; height: 120px;}
</style>
<div id="cndpt">
<div id="enopg"></div>
<div   id="mypic">
<div id="but"></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';
    } else {
    imgElement .style.display = 'none';
    }
}

mypic.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');   
</script >

你可根据需要修改参考一下！

红影 发表于 2024-12-8 09:19

谢谢亚伦老师，这样可以让动图也能一键暂停了，真好{:4_187:}

红影 发表于 2024-12-8 09:30

亚伦老师辛苦了。用动图和静图的替换唯一问题是只能停在固定帧上，不是任意帧，但至少能让动图停下了，也很不错呢{:4_187:}

红影 发表于 2024-12-8 09:34

这个背景很适合这个暂停方式，这个动图像视频似的，非常漂亮{:4_199:}

亚伦影音工作室 发表于 2024-12-8 10:39

红影 发表于 2024-12-8 09:30
亚伦老师辛苦了。用动图和静图的替换唯一问题是只能停在固定帧上，不是任意帧，但至少能让动图停下了，也很 ...

是的，要做任意帧不是不可能，只是复杂一些！

小辣椒 发表于 2024-12-8 13:57

亚伦影音工作室 发表于 2024-12-8 10:39
是的，要做任意帧不是不可能，只是复杂一些！

亚伦改的这个代码比我以前的那个效果好，你有了播放器，我是直接加了歌词同步，也是运用gif和jpg格式来控制打开和暂停的

小辣椒 发表于 2024-12-8 14:00

亚伦影音工作室 发表于 2024-12-8 10:39
是的，要做任意帧不是不可能，只是复杂一些！

这个好像有难度的，因为动图是无限制帧，而且有时候加的不止一个动图，设置任何一个具体帧都不能是任意帧，当然小辣椒代码盲，期待亚伦突破这个一键可以停止任意帧{:4_187:}

亚伦影音工作室 发表于 2024-12-8 15:10

小辣椒 发表于 2024-12-8 14:00
这个好像有难度的，因为动图是无限制帧，而且有时候加的不止一个动图，设置任何一个具体帧都不能是任意帧 ...

将动图分解得到每帧的静态图，当然太长的动图就不合适了！

红影 发表于 2024-12-8 17:27

亚伦影音工作室 发表于 2024-12-8 10:39
是的，要做任意帧不是不可能，只是复杂一些！

能停下就好呢，看到很多人的动图在暂停时不停呢，有了这个，可以让暂停时画面都静止，很赞{:4_199:}

小辣椒 发表于 2024-12-8 17:27

亚伦影音工作室 发表于 2024-12-8 15:10
将动图分解得到每帧的静态图，当然太长的动图就不合适了！

这个有点不现实呢，因为动图是无限制帧，很大的动图你根本无法确定，再说我一般几个动图一起上去。帧有多有少，很难确定具体的帧数，不晓得有没有这种专用代码

冬天的雨 发表于 2024-12-8 19:51

看见图片是404

亚伦影音工作室 发表于 2024-12-8 20:25

冬天的雨 发表于 2024-12-8 19:51
看见图片是404

图床出问题了！
页: [1]
查看完整版本: 利用'block' 'none'遮罩来实现动图暂停和开启（高手绕过）