给自己一个拥抱演唱：马健涛
本帖最后由 亚伦影音工作室 于 2025-5-18 19:43 编辑 <br /><br /><style>#papa {margin: 10px -300px;
width: 1286px;
height: 720px;
background:#333 url('https://img3.oldkids.cn/upload/2025/05/18/photo_0_20250518174751614.gif')0 0/100%;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;--state: paused;
}
#play { position: absolute;width: 100%; height:100%;top: 0%;left: 0%;z-index: 1; }
#play img{width: 100%;}
.lrc { font: 600 45px 'FZYaoti', sans-serif;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);position: absolute;z-index: 5;
width:80%;
height:180px;
top: 80%;
left: 10%;
text-align:center;
pointer-events: none;
overflow:hidden;
}
#img_border{display:inline-block;width:220px;height:220px;position: absolute;margin: 80px 900px ;
border:0px solid #cccccc;border-radius:50%;animation:rotating 10s linear infinite var(--state); z-index: 100;}
@keyframes rotating{0% {transform: rotateX(-45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(-45deg) rotateY(-20deg) rotateZ(360deg);}
}
#mpicd { position: absolute;
top: 0px;
left: 0px;
width: 100%;z-index: 1;
height: 100%;background: url('https://pic1.imgdb.cn/item/6829c5ac58cb8da5c8fb18f8.png')0 0/30%;
animation: flyd 50s linear infinite var(--state);mix-blend-mode: lighten;
opacity: 1;
}
#mpiccd { position: absolute;
top: 0px;
left: 0px;
width: 100%;z-index: 1;
height:100%;background: url('https://pic1.imgdb.cn/item/6829c5ac58cb8da5c8fb18f8.png')0 0/30%;
animation: totd 50s linear infinite var(--state);mix-blend-mode: lighten;
opacity: 1;
}
@keyframes flyd {0%{transform:translate(2%,0%)scale(0.5)perspective(255px) rotateY(-60deg);
background-position: -100% -200%;opacity: 1;
}
100%{opacity: 1;
background-position: 600% 200%;
}
}
@keyframes totd { 0%{background-position: 100% 200%;opacity: 1;
transform:translate(-2%,0%)scale(0.5)perspective(255px) rotateY(60deg);
}
100%{opacity: 1;
background-position: -600% -200%;
}
}
</style>
<div id="papa">
<div id="play" ><img id="Img" src="https://pic1.imgdb.cn/item/6829aba658cb8da5c8fb0908.gif" alt="" /></div>
<divid="mpicd"></div>
<divid="mpiccd"></div>
<div ><img id="img_border"src="https://pic1.imgdb.cn/item/6741e1d8d29ded1a8c23713b.png" ></div>
<div class="lrc"> <div class="words">亚伦影音</div></div>
</div>
<audio src="https://s2.ananas.chaoxing.com/sv-w7/audio/2f/a5/be/26322d567ff809e40b6282459e671c8e/audio.mp3" loop autoplay id="aud"></audio>
<textareaid="txt" style="display: none;">给自己一个拥抱
演唱：马健涛
亚伦影音工作室
别把最初的自己给弄丢
别让爱你的人担心难受
抬起嘴角微微一笑
给自己一个拥抱
偶尔感觉自己很狼狈
偶尔也会忽然落泪
偶尔迷茫 偶尔疲惫
偶尔失落 偶尔崩溃
你是天使来人间受罪
世界并不十全十美
呼叫太阳 给你力量
背起行囊 追逐梦想
乌云短暂的遮住的阳光
不必挂在心上变成心伤
大雨过后必有彩虹
咱还有梦还要前行
别把最初的自己给弄丢
别让爱你的人担心难受
抬起嘴角微微一笑
给自己一个拥抱
你是天使来人间受罪
世界并不十全十美
呼叫太阳 给你力量
背起行囊 追逐梦想
乌云短暂的遮住的阳光
不必挂在心上变成心伤
大雨过后必有彩虹
咱还有梦还要前行
别把最初的自己给弄丢
别让爱你的人担心难受
抬起嘴角微微一笑
给自己一个拥抱
乌云短暂的遮住的阳光
不必挂在心上变成心伤
大雨过后必有彩虹
咱还有梦还要前行
别把最初的自己给弄丢
别让爱你的人担心难受
抬起嘴角微微一笑
给自己一个拥抱
</textarea>
<script>
var num = 0;
var myMusic = document.getElementById("aud"); //通过ID 获取audio
var words = document.getElementsByClassName("words");
var mark = true; //布尔值 true真 false假
var txt = document.getElementById("txt");
var lrc = txt.value.split("[");
// console.log(txt.value);
var html = "";
//循环遍历 出歌词
for (var i = 0; i < lrc.length; i++) {
var lrcArrly = lrc.split("]");
var time = lrcArrly.split(".");
//console.log(lrc) //分割时分,秒
var times = time.split(":");
//console.log(times) //分割时,分
var ms = times * 60 + times * 1; //分钟转换为秒× 60 times 是秒数,×1 表示 string转换为int类型
// console.log(ms);
// console.log(lrcArrly); // 歌词
if (lrcArrly) { //判断是否存在 存在进入
html += "<pid=" + ms + "title=[" + lrc + ">" + lrcArrly + "</P>";
}
words.innerHTML = html;
// console.log(words.innerHTML);
};
//获取所有的p标签
var Ps = document.getElementsByTagName("p");
//aidio监听播放进度 发生变化,就触发函数
aud.addEventListener("timeupdate", function() {
// 输出时间变换:console.log(this.currentTime); 1.300000
console.log(this.currentTime);
var currentTimes = parseInt(this.currentTime); //取整
console.log(currentTimes);
if (document.getElementById(currentTimes)) {
//当前的 该颜色,非当前就改为以前颜色
for (var i = 0; i < Ps.length; i++) {
Ps.style.color = "";
Ps.style.fontSize = "0px";
}
document.getElementById(currentTimes).style.color = "#880000";
document.getElementById(currentTimes).style.fontSize = "45px";
if (Ps.id == currentTimes) {
words.style.top = 0 * num + "px";
if (num >= 58) {
num = 0;
}
num++;
}
}
});
img_border.onclick = () => aud.paused ?(aud.play(),image.play()):(aud.pause(),image.stop());
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.onplaying = aud.onpause = () => 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 = '';
}
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");
</script>
漂亮，谢谢亚伦老师精彩分享{:4_191:} 这些蝴蝶图片的移动真好看，跟上次的蒲公英有异曲同工之妙。
欣赏亚伦老师好帖{:4_199:} 亚纶这个会飞舞的动图用的是png，用动图不行吗？ 背景动图可以一键停止的{:4_199:} 欣赏亚纶的精彩制作
页:
[1]