祝红影18芳辰快乐
本帖最后由 亦是金 于 2025-3-18 00:47 编辑 <br /><br /><div style="width: 485px;height: 800px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: 10px;"><style>
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: relative; top: -360px; left: 100px; font: bold 2.0em sans-serif; color:
#FAEFC0; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>
<div id="mplayer">
<css-doodle grid="16">
:doodle {
@size: 485px 800px;
background: lightgreen url('https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg') no-repeat center/cover;
}
:doodle {transform: skew(0deg);}
position: absolute;
left: @r(-110)%;
top: 30%;
:after {
content: '@p(♪,♫,红影,生日,快乐,幸福,♥,❉,✿,❀,)';
color: @p(#f964e9,#6a82fb,#e409cd,#fb2323,#fb3c23,);
font-size: @r(8, 32)px;;
}
animation: fly 15s @r(-10,16)s infinite var(--state);
@keyframes fly {
from { transform: rotate(0deg) translate(0px); }
to { transform: rotate(@r(-60,60)deg) translate(1500px); }
}
</css-doodle>
<img class=&lazyload bg-gif" src="http://www.bohann.net/static/image/smiley/erhua/013.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -200px;LEFT:10px;height: 80px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">
<style type="text/css">
#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: relative;width: 300px;height: 30px;top:-860px;LEFT: -150px;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 id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">祝红影18芳辰快乐</span>
<span style="color:#3d46f7;"><span style="font-size:20px;"> </span></div>
<div style="position: relative;width: 500px;height: 50px;top:-160px;LEFT: 980px;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:26px;"> 亦是金在线音乐 </span></span></span></p></div>
<div style="position: relative;width: 600px;height: 50px;top:-160px;LEFT: 150px;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)">
<p><span style="color:#0f09fe;"><span style="font-family:华文隶书;"><span style="font-size:28px;"></span></span></span></p></div>
</style>
<div id="papa">
<div id="mama"><span id="box"></span></div>
<span id="btnplay"></span> <!--播放按钮代码-->
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
</div>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs04/1801.mp3" autoplay= "autoplay"></audio>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
(function() {
let mKey = 0, mFlag = true, slip = 0.1;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.loop = false;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime - slip >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
})();
motion();
function motion() {
moveX += stepX;
moveY += stepY;
mama.style.left = moveX + 'px';
mama.style.top = moveY + 'px';
requestAnimationFrame(motion);
if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>
<script>
(function() {
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://www.huachaowang.com/css-doodle.min.js');
document.head.appendChild(scriptEle);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 祝红影姐姐年年十八，越活越年轻。
借亦是金朋友贺帖祝福红影生日快乐 愤怒的葡萄 发表于 2024-1-7 14:56
祝红影姐姐年年十八，越活越年轻。
问好！共祝红影生日快乐！{:4_187:} 梦油 发表于 2024-1-7 14:58
借亦是金朋友贺帖祝福红影生日快乐
问好梦油朋友！共祝红影生日快乐！{:4_187:} 好棒的制作！赞！借亦是金朋友贺帖祝福红影生日快乐，事事如意！
{:4_204:}{:4_199:}{:4_187:} 大猫咪 发表于 2024-1-7 15:19
好棒的制作！赞！借亦是金朋友贺帖祝福红影生日快乐，事事如意！
问好大猫咪！同祝福红影生日快乐，事事如意！{:4_187:} 好漂亮的制作，我的签名能放那么大而不失真呢，这个厉害了。
散开的文字粒子运用得真好，还有摇摆字，歌曲也欢乐，亦是金老师的帖子太赞了{:4_199:} 多谢亦是金老师好礼，太开心了{:4_177:}
只是18的说法太夸张了，就算谭咏麟也只敢永远28啊{:4_173:} 愤怒的葡萄 发表于 2024-1-7 14:56
祝红影姐姐年年十八，越活越年轻。
多谢葡萄，也加油努力{:4_173:} 梦油 发表于 2024-1-7 14:58
借亦是金朋友贺帖祝福红影生日快乐
多谢梦油，我们一起快乐{:4_187:} 大猫咪 发表于 2024-1-7 15:19
好棒的制作！赞！借亦是金朋友贺帖祝福红影生日快乐，事事如意！
谢谢猫猫，大家一起快乐{:4_177:} 亦是金 发表于 2024-1-7 15:19
问好梦油朋友！共祝红影生日快乐！
亦是金朋友的制作太美了。 红影 发表于 2024-1-7 15:59
多谢梦油，我们一起快乐
影子朋友别客气。 欣赏亦是金朋友为红影制作的精美生日贺帖，赞！今天是红影的芳辰佳日，祝红影生日快乐！祝花潮论坛红火兴旺！ 红影 发表于 2024-1-7 15:57
好漂亮的制作，我的签名能放那么大而不失真呢，这个厉害了。
散开的文字粒子运用得真好，还有摇摆字，歌曲 ...
生日快乐！{:4_187:} 红影 发表于 2024-1-7 15:58
多谢亦是金老师好礼，太开心了
只是18的说法太夸张了，就算谭咏麟也只敢永远28啊
红影美女，永远18！{:4_187:} 醉美水芙蓉 发表于 2024-1-7 16:13
欣赏老师佳作！祝红影美女生日快乐！
问好水芙蓉！同祝红影美女生日快乐！{:4_187:} 相约爱晚亭 发表于 2024-1-7 17:17
欣赏亦是金朋友为红影制作的精美生日贺帖，赞！今天是红影的芳辰佳日，祝红影生日快乐！祝花潮论坛红火兴旺 ...
问好相约爱晚亭！同祝红影生日快乐！{:4_187:}
页:
[1]
2