立体倒影歌词尝试

亚伦影音工作室 发表于 2022-10-24 15:33

本帖最后由亚伦影音工作室于 2022-10-24 22:00 编辑 <br /><br /><style>
#papa { margin: 30px -214px; width: 1024px; height: 600px; background: #000000 url('https://') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; position: relative;z-index: 1; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: end start; }
.pMid { grid-area: mid; place-items: end center;bottom: 180px; }
.pFoot { grid-area: foot; place-items: center;bottom: 40px; }
#mplayer { position: absolute; width: 400px; height: 60px; font: normal 14px sans-serif; z-index: 5; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: -80px; bottom: 0px; width: 60px; height: 60px; border-radius: 0%;background: url('http://pan.yinhuabbs.cn/view.php/2da9f8fb707ddc142381963a5d71f8ca.png')0 0/100% 100%; cursor: pointer; z-index: 2; animation: rot linear 4s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}
#prog { --posX: 0px; position: absolute; bottom: 20px; width: 100%; height: 1px; background: #eee; cursor: pointer; z-index: 2;}
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 5px); width: 3px; height: 10px; background: silver; z-index: 2;}
#tit { position: absolute; bottom: 20px; right: 30px;font: bold 3em sans-serif;text-shadow: 2px 2px 3px #212121; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute;right: 250px; transform:perspective(300px)rotateY(40deg);font:bold 40px/1.8 georgia,sans-serif;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.5));
color:#800000 ; -webkit-background-clip: text; filter: drop-shadow(0px 0px 10px #FFF000)drop-shadow(0px 0px 10px #FF0000)drop-shadow(0px 0px 10px #00FFFF); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: linear-gradient(23deg, #FA0000 0%,#73FF00 100%); filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)hue-rotate(0deg)contrast(120%)brightness(200%); -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 {
50% { transform: rotateX(0deg) rotateY(180deg) rotate(0deg)scale(1);filter: hue-rotate(360deg)}}

#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: rote 80s linear infinite;
cursor: pointer;
opacity: 1;
}

@keyframes rote {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}

to {
background-position: -1600px 300px;
}
}

#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: rotet 100s linear infinite;
cursor: pointer;
opacity: 1;
}

@keyframes rotet {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}

to {
background-position: 0px -1600px;
}
}
#items
{position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;opacity: 1;
animation: slider 0.1s linear infinite;
}

@keyframes slider
{
from
{
opacity: 1;
filter: hue-rotate(360deg)contrast(120%)brightness(100%);
}

to
{
opacity: 1;
filter: hue-rotate(0deg)contrast(140%)brightness(100%);
}
}

</style>

<div id="papa">

   <divid="items"><div class="pTop"style="mix-blend-mode: multiply;background:url('https://pic1.imgdb.cn/item/6355453a16f2c2beb18fae71.png') no-repeat center/cover;width: 1024px; height: 600px;" /></div></div>
<imgid="mpic"style="width: 100%; height: 100%;background: url('https://pic1.imgdb.cn/item/635545d216f2c2beb190a1fa.png')0 0/50% 70%" >
<imgid="mpic1"style="width: 100%; height: 100%;background: url('https://pic1.imgdb.cn/item/635545d216f2c2beb190a1fa.png')0 0/30% 40%" >
   <div class="pMid"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
   <div class="pFoot">
            <div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
   </div>
</div>

<script>
(function() {
   let mKey = 0, mFlag = true, aud = new Audio();
   aud.src = 'https://www.qqmc.com/mp3/music55386202.mp3';
   aud.autoplay = true;
   aud.loop = true;
   let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => items.style.animationPlayState = 'running');
aud.addEventListener('pause', () => items.style.animationPlayState = 'paused');

mpic1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic1.style.animationPlayState = 'paused');
   if (aud.paused) btnplay.style.animationPlayState = 'paused';
   btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
   mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
   mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
   aud.addEventListener('pause', () => mState());
   aud.addEventListener('play', () => mState());
   aud.addEventListener('seeked', () => calcKey());
   aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin

(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= 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;};
   let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey =

lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
   let toMin = (val) => { if (!val) return '00:00'; val = Math.floor(val); let min = parseInt(val / 60), sec = parseFloat(val % 60); if (min < 10) min = '0' + min; if (sec <

10) sec = '0' + sec; return min + ':' + sec; };
   papa.oncontextmenu = () => false;
})();
</script>

<p><span style="font-size:50px;"><a href="http://pan.yinhuabbs.cn/view.php/7b3c76226d98770a61270dbdad6dc434.html" target="_blank"><span style="color:#f39c12;"><span style="background-color:#e74c3c;">点击欣赏全屏</span></span></a></span></p>

红影发表于 2022-10-24 15:58

歌词同步这样方式也很漂亮呢，背景变色，漂亮的制作。欣赏亚伦老师好帖{:4_187:}

红影发表于 2022-10-24 16:00

我的评分用光了，没法加分了{:4_204:}

马黑黑 发表于 2022-10-24 17:57

3d+倒影效果，挺不错的。文本3dCSS能胜任的

小辣椒 发表于 2022-10-24 20:31

我怎么看见是黑背景，亚伦又是http？

小辣椒 发表于 2022-10-24 20:32

就看见倒影效果，漂亮的，其他就是黑的了

起个网名好难 发表于 2022-10-24 20:46

很奇怪，有背景的无倒影。有倒影的无背景。

chrome、edge

firefox

大家看到的是个什么情况？

醉美水芙蓉 发表于 2022-10-24 20:53

起个网名好难 发表于 2022-10-24 21:05

醉美水芙蓉发表于 2022-10-24 20:53
亚伦老师做的就是黑色背景！

<div id="papa">

   <divid="items"><div class="pTop"style="mix-blend-mode: multiply;background:url('http://pan.yinhuabbs.cn/view.php/7885fc4a48bec2e662ad4fa03b408567.png') no-repeat

center/cover;width: 1024px; height: 600px;" /></div></div>
<imgid="mpic"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/f87d2b5dfe272eb91ddc45e6e9436478.png')0 0/50% 70%" >
<imgid="mpic1"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/f87d2b5dfe272eb91ddc45e6e9436478.png')0 0/30% 40%" >
   <div class="pMid"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
   <div class="pFoot">
            <div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
   </div>
</div>
代码里就有三处出现图片。

醉美水芙蓉 发表于 2022-10-24 21:21

起个网名好难 发表于 2022-10-24 21:23

醉美水芙蓉发表于 2022-10-24 21:21
这个我能看见，花潮的老师看不见，换个地址就可以了！

现在是不换地址换个浏览器就看见了。

亚伦影音工作室 发表于 2022-10-24 21:32

本帖最后由亚伦影音工作室于 2022-10-24 21:53 编辑

背景没加图片，只想呈现倒影和3D效果歌词，360浏览器兼容模式可看到！点击欣赏全屏

页: [1]

花潮论坛's Archiver

立体倒影歌词尝试