《我是真的不想变老》 - 余晓清（试帖黑黑老师图片配色同步歌词代码1）
本帖最后由 亦是金 于 2024-12-30 16:17 编辑 <br /><br /><style>#papa { margin: 150px 0 0 calc(50% - 681px);
width: 1200px;
height: 680px;
border: 6px solid rgba(36, 201, 219,.95);
border-radius: 20px;
background: gray url('') no-repeat center/cover;
box-shadow: 0px 0px 0px rgb(255, 255, 255, 1.25);
position: relative;
display: grid;
place-items: center; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
}
#dt1{ position: absolute; width: 1000px; height: 670px; top: 10px; left: 200px;opacity: .3;mix-blend-mode: color-dodge; z-index: 3; }
#dt2{ position: absolute; width: 120px; height: 106px; top: 80px; left: 150px; opacity: 1; mix-blend-mode: multiply; z-index: 3; }
</style>
<div id="papa">
<img id="dt1" src="https://z4a.net/images/2024/01/12/aixin03.gif" alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231224121432.gif " alt="" />
<video src="https://img.tukuppt.com/video_show/41532423/01/33/16/62e535a77a8ac.mp4" muted loop></video>
</div>
<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let player = new ypP();
player.setAudSrc('https://cccimg.com/view.php/f04aa70c61c191252ecee7487b1a0c6a.mp3');
player.setBtnCss(`
width: 200px;
bottom: 20px;
left: 50px;
opacity: .9;
--btnBg: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzA1MDYzNjMwMjA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIzNjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTU2MC4zMjc1MTM2IDI1MS4xNjExNjY5M2MtNDkuMzAwNTUwNCAwLTk1LjIyNzkwNTA3IDM0LjEyMTE3MDEzLTEyNS40NTY5MjY5MyA3MS40ODU3OTg0LTMwLjIyOTAyMTg3LTM3LjM2NDYyNzItNzYuMDI2NjM3ODctNzEuNDg1Nzk4NC0xMjUuNDU2OTI2OTQtNzEuNDg1Nzk4NC04OS4wMDA0NjcyIDAtMTYxLjM5NDQzMzA3IDcyLjM5Mzk2NTg3LTE2MS4zOTQ0MzMwNiAxNjEuMzk0NDMzMDcgMCA1My4wNjI5NjEwNyAyNS45NDc2NTc2IDkwLjI5Nzg0OTYgNDYuNzA1Nzg0NTMgMTIwLjI2NzM5NTIgNjAuNTg3NzgxMzMgODYuOTI0NjU0OTMgMjEyLjkwMDUzNDQgMTk0Ljk5NjY1MDY3IDIxOS4yNTc3MTA5MyAxOTkuNjY3MjI4OGEzNS44NjM1NTUyIDM1Ljg2MzU1NTIgMCAwIDAgNDEuNTE2MjUyOCAwYzYuNDg2OTE0MTMtNC41NDA4NDA1MyAxNTguNzk5NjY3Mi0xMTIuNzQyNTczODcgMjE5LjI1NzcwOTg3LTE5OS42NjcyMjg4IDIwLjg4Nzg2NDUzLTI5Ljk2OTU0NTYgNDYuODM1NTIzMi02Ny4yMDQ0MzQxMyA0Ni44MzU1MjMyLTEyMC4yNjczOTUyIDAuMTI5NzM4NjctODkuMDAwNDY3Mi03Mi4yNjQyMjgyNy0xNjEuMzk0NDMzMDctMTYxLjI2NDY5NDQtMTYxLjM5NDQzMzA3eiIgZmlsbD0iIzRDMTgxOCIgcC1pZD0iMjM2OCI+PC9wYXRoPjxwYXRoIGQ9Ik01NDkuNTU5MjM1MiAyNzcuMTA4ODI1NmMtNDUuMDE5MTg3MiAwLTg2LjkyNDY1NDkzIDQzLjg1MTU0MjQtMTE0LjQyOTE3MjI3IDc2LjY3NTMyOTA3LTI3LjUwNDUxNzMzLTMyLjgyMzc4NzczLTY5LjQwOTk4NTA3LTc2LjY3NTMzMDEzLTExNC41NTg5MDk4Ni03Ni42NzUzMjkwNy04MS4yMTYxNjk2IDAtMTQ3LjI1Mjk2IDYzLjcwMTUwMDgtMTQ3LjI1Mjk2IDE0Mi4wNjM0MjcyIDAgNDYuNzA1Nzg0NTMgMjMuNjEyMzY5MDcgNzkuNTI5NTcyMjcgNDIuNjgzODk3NiAxMDUuODY2NDQ1ODcgNTUuMjY4NTEyIDc2LjU0NTU5MTQ3IDE5NC4yMTgyMjA4IDE3OC4yNjA0MTA2NyAyMDAuMTg2MTgyNCAxODIuMTUyNTU4OTMgNS43MDg0ODQyNyAzLjg5MjE0ODI3IDEyLjMyNTEzNzA3IDUuODM4MjIyOTMgMTguOTQxNzg5ODYgNS44MzgyMjI5M3MxMy4yMzMzMDU2LTMuMjQzNDU3MDcgMTguOTQxNzkwOTQtNy4xMzU2MDUzM2M1LjgzODIyMjkzLTQuMDIxODg2OTMgMTQ0LjkxNzY3MDQtMTA0LjQzOTMyMzczIDIwMC4xODYxODEzMy0xODAuODU1MTc2NTMgMTkuMDcxNTI4NTMtMjYuMzM2ODcyNTMgNDIuNjgzODk3Ni01OS4xNjA2NjAyNyA0Mi42ODM4OTc2LTEwNS44NjY0NDU4Ny0wLjEyOTczODY3LTc4LjM2MTkyNzQ3LTY2LjE2NjUyOC0xNDIuMDYzNDI4MjctMTQ3LjM4MjY5NzYtMTQyLjA2MzQyNzJ6IiBmaWxsPSIjRjQ1RTQwIiBwLWlkPSIyMzY5Ij48L3BhdGg+PHBhdGggZD0iTTc0OC41Nzc3NzI4IDM4MS41NDgxNDkzM2MtNDIuMTY0OTQ0IDAtODEuMzQ1OTA4MjcgMjkuMTkxMTE1NzMtMTA3LjE2MzgyODI3IDYxLjEwNjczNDk0LTI1LjgxNzkyLTMxLjkxNTYxOTItNjQuOTk4ODgzMi02MS4xMDY3MzQ5My0xMDcuMTYzODI4MjYtNjEuMTA2NzM0OTQtNzYuMDI2NjM3ODcgMC0xMzcuNzgyMDY0IDYxLjc1NTQyNjEzLTEzNy43ODIwNjQgMTM3Ljc4MjA2NCAwIDQ1LjI3ODY2MzQ3IDIyLjE4NTI0OCA3Ny4wNjQ1NDQgMzkuOTU5MzkzMDYgMTAyLjYyMjk4Nzc0IDUxLjc2NTU3NzYgNzQuMjEwMzAxODcgMTgxLjc2MzM0NTA3IDE2Ni41ODM5NjQ4IDE4Ny4zNDIwOTE3NCAxNzAuNDc2MTEzMDYgNS4zMTkyNzA0IDMuNzYyNDEwNjcgMTEuNTQ2NzA4MjcgNS41Nzg3NDY2NyAxNy42NDQ0MDc0NiA1LjU3ODc0NjY3IDYuMjI3NDM3ODcgMCAxMi40NTQ4NzU3My0xLjgxNjMzNiAxNy42NDQ0MDc0Ny01LjU3ODc0NjY3IDUuNTc4NzQ2NjctMy44OTIxNDgyNyAxMzUuNTc2NTEzMDctOTYuMjY1ODExMiAxODcuMzQyMDkxNzMtMTcwLjQ3NjExMzA2IDE3Ljc3NDE0NjEzLTI1LjU1ODQ0MzczIDM5Ljk1OTM5MzA3LTU3LjM0NDMyNDI3IDM5Ljk1OTM5MzA3LTEwMi42MjI5ODc3NCAwLTc2LjAyNjYzNzg3LTYxLjg4NTE2NDgtMTM3Ljc4MjA2NC0xMzcuNzgyMDY0LTEzNy43ODIwNjR6IiBmaWxsPSIjNEMxODE4IiBwLWlkPSIyMzcwIj48L3BhdGg+PHBhdGggZD0iTTc0MC41MzM5OTg5MyA0MDMuNzMzMzk2MjdjLTM4LjQwMjUzNDQgMC03NC4yMTAzMDE4NyAzNy4zNjQ2MjcyLTk3LjgyMjY3MDkzIDY1LjUxNzgzNjgtMjMuNDgyNjMwNC0yOC4wMjM0NzA5My01OS4yOTAzOTg5My02NS41MTc4MzY4LTk3LjgyMjY3MDkzLTY1LjUxNzgzNjgtNjkuMjgwMjQ3NDcgMC0xMjUuNzE2NDAzMiA1NC4zNjAzNDM0Ny0xMjUuNzE2NDA0MjcgMTIxLjMwNTMwMjQgMCAzOS45NTkzOTMwNyAyMC4yMzkxNzMzMyA2Ny44NTMxMjUzMyAzNi40NTY0NTk3MyA5MC40Mjc1ODgyNkM1MDIuODUzNDUwNjcgNjgwLjcyNDY0NjQgNjIxLjU2Mzk4NjEzIDc2Ny41MTk1NjI2NyA2MjYuNjIzNzc5MiA3NzEuMDIyNDk3MDdjNC44MDAzMTY4IDMuMjQzNDU3MDcgMTAuNTA4ODAxMDcgNC45MzAwNTU0NyAxNi4yMTcyODY0IDQuOTMwMDU0NHMxMS4yODcyMzA5My0yLjcyNDUwNDUzIDE2LjA4NzU0NzczLTYuMDk3Njk5MmM1LjA1OTc5MzA3LTMuMzczMTk1NzMgMTIzLjc3MDMyODUzLTg5LjEzMDIwNTg3IDE3MC44NjUzMjkwNy0xNTQuNTE4MzA0IDE2LjIxNzI4NjQtMjIuNDQ0NzI0MjcgMzYuNDU2NDU5NzMtNTAuNDY4MTk1MiAzNi40NTY0NTk3My05MC40Mjc1ODgyNyAwLTY2LjgxNTIxOTItNTYuNDM2MTU2OC0xMjEuMTc1NTYzNzMtMTI1LjcxNjQwMzItMTIxLjE3NTU2MzczeiIgZmlsbD0iI0Y0NUU0MCIgcC1pZD0iMjM3MSI+PC9wYXRoPjwvc3ZnPg==') no-repeat center/cover;
--btnSize: 90px;
`);
player.setLrcCss(`top: 610px; color: rgba(250,250,250,.4); --bg: url('https://z4a.net/images/2024/01/12/auewj-fb7cv.gif'); font-size: 2.0em;`);
player.lrcAr = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
};
</script>
<div style="position: relative; top:-720px;LEFT: -420px;z-index: 12435;">
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
font-size: 26px;
color: #ff0000;
position: relative;
text-align:center;
transform: translate(0%,35%);
font-weight: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
-webkit-animation:loop 3s linear 1000000;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
.tit {
position: relative;
width: 700px;
top: 40px;
left: 0px;;
font-family:迷你简细圆;
font-size: 40px;
text-shadow: 2px 2px #ff00ff;
font-weight:bold;
color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span>《我是真的不想变老》 - 余晓清</span>
<span > </span></div>
<div style="position: relative;width: 500px;height: 50px;top:620px;LEFT: 1150px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:22px;">亦是金在线音乐</span></span></span></p></div>
</style>
人老心不老，老又何妨？ 马黑黑 发表于 2024-1-12 22:18
人老心不老，老又何妨？
是的！{:4_199:}问好黑黑老师！谢谢你的代码！{:4_190:} 前辈真人秀啊{:4_187:} 亦是金 发表于 2024-1-12 22:27
是的！问好黑黑老师！谢谢你的代码！
{:4_191:} 这个mp4背景用的真好{:4_199:} 这个图片的歌词颜色好漂亮哦，制作的太美了{:4_178:} 小辣椒欣赏加学习，过几天也是争取做一个{:4_205:} 这个歌词同步的颜色漂亮，心形按钮也好浪漫。这个帖子太美了。欣赏亦是金老师好帖{:4_199:} 小辣椒 发表于 2024-1-12 23:15
前辈真人秀啊
{:4_189:} 马黑黑 发表于 2024-1-12 23:18
{:4_190:} 小辣椒 发表于 2024-1-12 23:19
这个mp4背景用的真好
问好！{:4_187:}谢谢夸奖！ 小辣椒 发表于 2024-1-12 23:20
这个图片的歌词颜色好漂亮哦，制作的太美了
谢谢喜欢！{:4_187:} 小辣椒 发表于 2024-1-12 23:21
小辣椒欣赏加学习，过几天也是争取做一个
不急！慢慢做！{:4_187:} 红影 发表于 2024-1-12 23:32
这个歌词同步的颜色漂亮，心形按钮也好浪漫。这个帖子太美了。欣赏亦是金老师好帖
问好红影！谢谢欣赏点赞！{:4_187:} https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 亦是金 发表于 2024-1-13 00:06
谢谢咖啡 背景用的不错，喜欢。 起个网名好难 发表于 2024-1-13 08:09
老师早上好！谢谢欣赏！{:4_190:} 马黑黑 发表于 2024-1-13 08:45
谢谢咖啡
老师早上好！{:4_180:}
页:
[1]
2