《琵琶声声揪心肠》 - 赵洋
本帖最后由 亦是金 于 2024-12-31 12:01 编辑 <br /><br /><div class="cont-area"><div style="position: absolute; width: 1200px;height: 700px; box-shadow:0px 0px 1px 2px #5c2904, 0px 0px 0px 8px #a54906,0px 0px 5px 15px #5c2904;overflow:hidden;border-radius:1%;margin-top:100px;margin-LEFT: -310px;">
<marquee STYLE="WiDTH: 1200px; HeiGHT: 700px" HEIGHT="700px" BEHAVIOR="alternate" WIDTH="1200" SCROLLAMOUNT="6"><imgsrc ="https://s1.ax1x.com/2023/02/26/pppRsBR.jpg" WIDTH="3000" HEIGHT="700"></MARQUEE>
<img src="https://s21.ax1x.com/2024/12/29/pAxR0zD.png" alt="" style="position: absolute; width: 1200px;height: 700px; transform: translate(-1200px, 0px); mix-blend-mode: normal;" />
<img src="https://z4a.net/images/2024/12/29/yh2007.gif" alt="" style="position: absolute; width: 1200px;height: 580px; transform: translate(-1200px, 0px); mix-blend-mode: screen;" />
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 150px;height: 80px; transform: translate(-950px, 500px); mix-blend-mode: multiply;" />
<style>
#papa {
margin: auto;
width: 1200px;
height: 700px;
top: -700px;
left: 0px;;
background: url('https://s11.ax1x.com/2023/03/23/ppwmpo8.png') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
display: grid;
place-items: center;
position: relative;
z-index: 1;
}
#mypic {
position: absolute;
width: 150px;
mix-blend-mode: normal;/*混合混合模式：正常*/
cursor: pointer;
transition: filter 1s;
animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
filter: invert(150%) drop-shadow(4px 4px 20px #ffffff);
}
li-zi {
position: absolute;
width: 58px;
height: 58px;
background: url('https://www.emojiall.com/images/60/telegram/1f33a.gif');
animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
from { transform: translate(100,0) rotate(var(--deg)); opacity: 0.2; }
to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<img id="mypic" src="https://www.emojiall.com/images/60/telegram/1f338.gif" alt="" title="暂停/播放" />
<audio id="aud" src="https://cccimg.com/view.php/07cf23891f4577fa860684d2142c03e1.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let total = 20;
Array.from({length: total}).forEach((lz,key) => {
lz = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / total * key;
let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
lz.style.cssText += `
--xx: ${xx}px;
--yy: ${yy}px;
--deg: ${360 / total * key}deg;
--du: ${4 + Math.random() * 10}s;
--de: -${Math.random() * 3}s;
`;
papa.prepend(lz);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://cccimg.com/down.php/f3adc8684d0a444380d203c04e43ee14.js';
/*彩虹外链网盘lrc-ysj.js*/
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#mypic',
lrc_css: (`bottom: 80px; color: rgba(255,255,255,.9); --bg: url('https://z4a.net/images/2024/01/15/20240115a.jpg'); font-size: 2.4em;`)
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
<div style="position: relative; top: -1420px; LEFT: 0px;z-index: 12435;">
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: absolute;width: 500px;height: 50px;top:30px;LEFT: 0px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
</div></div>
<DIV style="HEIGHT: 850px"
前辈你这个代码有错误，我也是修改不好，加分也是被遮挡了 现在编辑文字可以出来了，你再看看怎么修改 制作效果很漂亮，感谢精彩的分享{:4_187:} 小辣椒 发表于 2024-12-29 22:18
现在编辑文字可以出来了，你再看看怎么修改
哈哈哈，我一改动，编辑文字又被遮挡了。晕！{:5_149:} @小辣椒 请试试把改为 </TD></TR></TBODY></TABLE>
<DIV style="HEIGHT: 1000px" 试试！谢谢！ 制作很漂亮，有图片滚动，还有漂亮的小播。同步歌词尤其漂亮。
欣赏亦是金老师好帖{:4_199:} 好像无法评分，暂停也无法停止图片往复滚动呢{:4_204:} 红影 发表于 2024-12-29 22:52
好像无法评分，暂停也无法停止图片往复滚动呢
@红影我在https://www.huachaowang.com/forum.php?mod=viewthread&tid=75080&page=1&extra=#pid2084497
试帖了一个。请你看看是否留有评分空间！谢谢！{:4_187:} 小辣椒 发表于 2024-12-29 22:16
前辈你这个代码有错误，我也是修改不好，加分也是被遮挡了
现在代码修改后，有加分的空间了!问好小辣椒！{:4_187:} 亦是金 发表于 2024-12-29 23:41
@红影我在https://www.huachaowang.com/forum.php?mod=viewthread&tid=75080&page=1&extra=#pid2084497 ...
有评分空间，但论坛出问题。
不能加</TD></TR></TBODY></TABLE>，会让论坛变形。
其实是div没封闭，帮你加了两个</div>，可以评分了。 亦是金 发表于 2024-12-29 22:39
@小辣椒 请试试把改为
前辈我昨天没有时间上来
页:
[1]