同玩岁月 - 有个傻瓜在想你（DJ 彭锐版）字幕循环3次且可控
本帖最后由 亚伦影音工作室 于 2024-9-19 19:04 编辑 <br /><br /><style type="text/css">#papa{position: relative;width: 1286px;height: 720px;background:#000 url(1)no-repeat center/cover;box-shadow: 0px 0px 0px #000;display: grid;place-items: center;overflow:hidden;left: -300px;}#pinpu { position: absolute; width: 100%; height: 100%; z-index: 2; bottom:0px;left:0px;}
#pinpu img{ width: 100%;height: 100%; }
.list{list-style: none;left: -50px;top: 130px;width:100%;height:100%;position:absolute;z-index: 4;overflow:hidden;}
.list li{width: 90%;height: 90%;position:relative;line-height: 600px;text-align: center;left: 5%;font: 600 3.5em/1.6em 黑体;animation: myfirst 12s linear 3 0s;color:#880000;transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);opacity:0;overflow:hidden;}
.stop .list li{animation-play-state: paused;}
@keyframes myfirst {0% {
opacity: 0;
transform:perspective(600px) translate(100%,0%)scale(1)rotateX(20deg)rotateY(-200deg);
}
10% {
opacity: 1;
transform: translateX(0px);
}
50% {
opacity: 1;
transform: translateX(0px);
}
60% { opacity: 1;transform:perspective(600px) translate(-100%,0%)scale(1)rotateX(20deg)rotateY(-180deg);}
100% { opacity: 0;transform:perspective(600px) translate(-100%,0%)scale(1)rotateX(20deg)rotateY(-180deg);}
}
#play { position: absolute; width: 160px; height: 200px;top: 50%; cursor: pointer; left: 8%;z-index: 21; }
#play img{height: 100%;width: 100%;}
</style>
<div id="papa">
<div id="pinpu"> <img id="pinpuImg" src="https://v.djqq.net/tttdj/upfile/20240916155645.gif" alt="仿频谱" /></div>
<div id="testImg" ><div class="list">
<li><p style="zoom:1.4">有个傻瓜在想你</p><br /><p style="zoom: .7">作词：音萌萌/作曲：音萌萌<br />亚伦影音工作室<br/>演唱:小雨点</p></li>
</div></div>
<div id="play" title="暂停/播放"><img id="Img" src="https://pic.imgdb.cn/item/643892220d2dde5777382bcb.gif" alt="" /></div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/0ace-audiofreehighqps/30/8F/GKwRIDoKvWK0ACAAAAMQsjfA.m4a" autoplay loop></audio>
</div>
<script>
play.onclick = () => aud.paused ?( aud.play(),image.play(),imagee.play(),image0.classList.remove('stop')):(aud.pause(),image.stop(),imagee.stop(),image0.classList.add('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';imagee.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("Img");var imagee= document.getElementById("pinpuImg");var image0 = document.getElementById("testImg");
</script>
这个是小辣椒加过效果的岁月制作吧，有趣，亚伦老师又加了文字和一只小狐狸。
欣赏亚伦老师好帖{:4_187:} 亚伦朋友中秋节快乐！ 亚伦，你这个播放器用的和我不一样，我用的是黑黑的代码播放器，现在我已经修改好了
页:
[1]