《醉美春天》（DJ版） - 红蔷薇
本帖最后由 亦是金 于 2023-4-28 20:20 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1854145">
<div style="width: 1200px;height: 700px;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: -310px;">
<style>
#papa {
left: 0px;
top: -80px;
width: 1200px;
height: 700px;
background: lightblue url('https://z4a.net/images/2023/04/28/0428.gif') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
.star5 { position: absolute; background: transparent; top: -0px; left: -0px; font: normal 18px /18px sans-serif; offset-distance: 0%; offset-path: path("m190.5,150c0,0 16,7 15.5,7c0.5,0 18.5,-3 18,-3c0.5,0 27.5,-6 27,-6c0.5,0 15.5,-3 15,-3c0.5,0 -67.5,41 -68,41c0.5,0 25.5,-8 25,-8c0.5,0 22.5,-8 22,-8c0.5,0 -101.5,59 -102,59c0.5,0 17.5,0 17,0c0.5,0 35.5,-14 35,-14c0.5,0 28.5,-10 28,-10c0.5,0 32.5,-10 32,-10c0.5,0 40.5,-13 40,-13c0.5,0 -73.5,-66 -74,-66c0.5,0 1.5,50 1,50c0.5,0 -15.5,54 -16,54c0.5,0 -22.5,36 -23,36c0.5,0 -19.5,22 -20,22c0.5,0 -33.5,10 -34,10c0.5,0 106.5,-81 106,-81c0.5,0 25.5,29 25,29c0.5,0 24.5,10 24,10c0.5,0 28.5,10 28,10c0.5,0 30.5,-7 30,-7c0.5,0 28.5,-19 27.5,-20c-1,-1 -129,5 -129.5,5c0.5,0 -28.5,16 -29,16c0.5,0 -7.5,22 -8,22c0.5,0 2.5,25 2,25c0.5,0 18.5,11 18,11c0.5,0 33.5,-19 33,-19c0.5,0 11.5,-21 11,-21c0.5,0 -15.5,-16 -16,-16c0.5,0 -27.5,11 -28,11c0.5,0 -1.5,21 -2,21c0.5,0 21.5,3 21,3"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 18s var(--ss) linear infinite; }
@keyframes move{to{offset-distance:100%}}
#btnFs {
position: absolute;
bottom: 80px;
right:-80px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid green;
color: lightgreen;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
@keyframes beat { to { transform: rotate(135deg) scale(0.9); } }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 200px; bottom: 50px; font: bold 2.2em sans-serif; color: hsl(20, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);z-index: 99; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-10deg); } }}
.pic { position: absolute; width: 664px; height: 116px; top: -80px; object-fit: cover; opacity: 1; }
</style>
<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: relative;width: 300px;height: 30px;top:20px;LEFT: -320px;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;">《醉美春天》（DJ版）</span>
<span style="color:#3d46f7;"><span style="font-size:18px;">- 红蔷薇</span></div>
<div style="position: relative;width: 500px;height: 50px;top:610px;LEFT: 900px;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>
</style>
<div id="papa">
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 80px;height: 40px; transform: translate(780px, 420px); " />
<css-doodle id="mplayer">
:doodle {
@grid: 1x100 / 100px;
position: absolute;
bottom: 20px;
left: 50px;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
@place-cell: center;
@size: calc(100% - @calc(@index - 1) * 1%);
background: hsla(
calc(calc(500 - @index) * 2.55),
calc(@index * 5%),
55%,
calc(@index / 100)
);
clip-path: @shape(
fill-rule: evenodd;
split: 200;
scale: .45;
x: cos(3t) + cos(π - 15t);
y: sin(3t) + sin(π - 15t);
);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<div id="lrc" data-lrc="花潮lrc在线"></div>
<img class="pic" src="" alt="" /></div>
<div id="btnFs">全屏欣赏</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music267837035.mp3" autoplay="" loop=""></audio>
</div>
<script>
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 1}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'star5';
ele.innerText = '\u273f';
ele.style.cssText += `--ss: ${key * 0.5}s; color: #f999f8;`;
papa.appendChild(ele);
});
</script>
<script>
(function() {
let fs = false, timerId;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
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;
};
})();
</script>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => papa.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>
</td></tr></table> 学习黑黑老师花朵播放器！谢谢老师的教程！{:4_191:} 漂亮的花朵，漂亮的帖，欣赏点赞！{:4_187:} 梦缘 发表于 2023-4-27 15:23
漂亮的花朵，漂亮的帖，欣赏点赞！
问好梦缘！谢谢欣赏！{:4_187:} 欣赏！{:4_187:} 焱鑫磊 发表于 2023-4-27 18:06
欣赏！
问好焱鑫磊！谢谢欣赏！{:4_187:} 醉美水芙蓉 发表于 2023-4-27 21:00
欣赏老师佳作！
问好醉美水芙蓉！谢谢欣赏！{:4_187:} 欣赏前辈的制作，黑黑的花瓣播放器用的不错，外加路径也是特别美 小辣椒提个建议，前辈以后加效果还可以改一下尺寸，你加的swf不要太大，改小尺寸，这样画面看上去不会很满 这个水中游的鱼儿起码小一半的尺寸 其实这个制作你加的效果很多，还有外加效果，改了黑黑播放器，加了歌词同步，非常的棒！ 我最近比较忙，过几天我有时间就套用你这个代码做一次，看看我加的效果，一起学习交流 小辣椒 发表于 2023-4-27 22:14
欣赏前辈的制作，黑黑的花瓣播放器用的不错，外加路径也是特别美
问好小辣椒！{:4_187:} 小辣椒 发表于 2023-4-27 22:16
小辣椒提个建议，前辈以后加效果还可以改一下尺寸，你加的swf不要太大，改小尺寸，这样画面看上去不会很满
谢谢指点！{:4_187:} 小辣椒 发表于 2023-4-27 22:18
这个水中游的鱼儿起码小一半的尺寸
水中游的鱼儿， 近景的荷花蝴蝶，背景都是原来swf 的。我没有改动它们的尺寸。应该在原来的swf中缩小它们尺寸，使得它们和整个画面谐调一些。谢谢指点！{:4_187:} 这个画面丰富多彩，动感，好制作{:4_199:} {:4_199:}感谢分享 漂亮的制作，赞{:4_199:} 小辣椒 发表于 2023-4-27 22:18
这个水中游的鱼儿起码小一半的尺寸
根据你的指点！我已经将 水中游的鱼儿， 近景的荷花蝴蝶的尺寸改小了！请你看看，这样行吗？{:4_187:}
页:
[1]
2